طريقة تركيب سلايدر شو أحترافي متحرك لقوالب بلوجر
يُعدّ تركيب سلايدر شو متحرك في قالب بلوجر من الإضافات المهمة التي تمنح المدونة مظهراً احترافياً وجذاباً، كما يساعد في إبراز المحتوى بطريقة منظمة وملفتة للانتباه.
ما هو السلايدر؟
السلايدر هو مساحة في أعلى الصفحة أو داخلها، تُستخدم لعرض مجموعة من الصور أو المقالات بشكل متحرك وتلقائي، حيث تتغيرالعناصر المعروضة كل بضع ثوانٍ أو من خلال تحكم المستخدم.
أهمية السلايدر
- تكمن أهمية السلايدر في قدرته على عرض المواضيع و جذب الأنتباه
- أظهار أبرز المواضيع بالموقع من خلال عرضها بشكل مميز
- أحدث المقالات اللتي تم عرضها بالموقع و يتم تسليط الضوء عليها
كيفية تركيبه في بلوجر
عملية تركيب السلايدر ليست معقدة، ويمكن تنفيذها عبر:تعديل كود القالب تعتمد على أكواد
شرح التركيب بالفيديو
الأكواد الخاصة بالسلايدر
نذهب الى اكواد القالب من خلال المظهر و الذهاب الى تعديلالخاص بمكتبة الأيقونات
<!-- Bootstrap Icons --><link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css' rel='stylesheet'/>
ثم نقوم نضع الكود التالي في المكان المناسب مثلا فوق رسائل المدونة الألكترونية او اسفل الهيدر /header
<b:section class='HomeSliderSection' id='HomeSliderSection' maxwidgets='1' showaddelement='yes'><b:widget id='HTML150' locked='false' title='السلايدر والشبكة' type='HTML' version='2' visible='true'><b:widget-settings><b:widget-setting name='content'/></b:widget-settings><b:includable id='main'><b:if cond='data:view.isHomepage'><div class='hm-container'><div class='hm-grid'><div class='hm-item' id='item1'><div class='loading-spinner'/></div><div class='hm-item' id='item2'><div class='loading-spinner'/></div><div class='hm-slider-wrapper' id='imageslider'><div class='slider-inner'><div class='loading-spinner'/></div><button class='BTlef'><i class='bi bi-chevron-left'/></button><button class='BTRig'><i class='bi bi-chevron-right'/></button></div><div class='hm-item' id='item4'><div class='loading-spinner'/></div><div class='hm-item' id='item5'><div class='loading-spinner'/></div></div></div></b:if></b:includable></b:widget></b:section>
و ثم نبحث عن </head> و نضيف الكود التالي اعلاه
<style>.hm-container{max-width:1280px;margin:20px auto;direction:rtl;background:#efefef;padding:18px;border-radius:10px;}.hm-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:15px}.hm-item{background:#f5f5f5;height:230px;position:relative;border-radius:12px;overflow:hidden}#imageslider{grid-column:3;grid-row:1 / span 2;position:relative;height:475px;border-radius:12px;overflow:hidden;background:#eee}.slider-inner{width:100%;height:100%;position:relative}.slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease;z-index:1}.slide.active{opacity:1;z-index:2}.hm-item img,.slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease-in-out,filter 0.5s ease-in-out;filter:brightness(1)}.hm-item:hover img{transform:scale(1.1);filter:brightness(0.7)}.slide:hover img{transform:scale(1.05);filter:brightness(0.8)}.hm-title{position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;z-index:3}.slide-info{position:absolute;bottom:0;left:0;right:0;padding: 40px 20px;background:linear-gradient(transparent,rgba(0,0,0,0.85));color:#fff;z-index:3}.slide-info b{padding: 17px 0;font-size:18px;display:block}.hm-title h3{font-size:14px;margin:0;color:#fff;text-align:center}.post-label{position:absolute;top:10px;right:10px;background:#ff5a5f;color:#fff;padding:2px 8px;border-radius:4px;font-size:10px;z-index:4}#imageslider button{position:absolute;top:50%;transform:translateY(-50%);width:35px;height:35px;border-radius:50%;border:none;background:rgba(255,255,255,0.8);cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center}.BTlef{left:10px}.BTRig{right:10px}@keyframes spin{100%{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width:992px){.hm-grid{grid-template-columns:1fr 1fr}#imageslider{grid-column:1 / span 2;grid-row:1;height:400px}}@media (max-width:600px){.hm-container{margin:10px;padding:10px}.hm-grid{grid-template-columns:1fr;gap:10px}#imageslider{grid-column:1;height:280px}.hm-item{height:200px}.slide-info b{font-size:16px}}</style>
و أخيرا نبحث عن </body> و نضيف الكود التالي اعلاه
<script type='text/javascript'>//<![CDATA[(function(){document.addEventListener('DOMContentLoaded', function() {const sliderContainer = document.getElementById('imageslider');if (!sliderContainer) return;const script = document.createElement('script');script.src = '/feeds/posts/default?alt=json-in-script&max-results=10&callback=initHomeUI';document.head.appendChild(script);window.initHomeUI = function(data) {const posts = data.feed.entry || [];const items = ['item1', 'item2', 'item4', 'item5'];items.forEach((id, i) => {const el = document.getElementById(id);if (posts[i] && el) {const post = posts[i];const title = post.title.$t;const url = post.link.find(l => l.rel === 'alternate').href;const img = post.media$thumbnail ? post.media$thumbnail.url.replace('s72-c', 's600') : 'https://via.placeholder.com/600x400';const label = post.category ? post.category[0].term : 'أخبار';el.innerHTML = `<a href="${url}"><div class="post-label">${label}</div><img src="${img}"><div style="position:absolute;bottom:0;left:0;right:0;padding:15px;background:linear-gradient(transparent,rgba(0,0,0,0.8));color:#fff;"><h3 style="font-size:14px;margin:0;">${title}</h3></div></a>`;}});const sliderInner = sliderContainer.querySelector('.slider-inner');const sliderPosts = posts.slice(4, 9);if (sliderInner && sliderPosts.length > 0) {sliderInner.innerHTML = '';sliderPosts.forEach((post, idx) => {const title = post.title.$t;const url = post.link.find(l => l.rel === 'alternate').href;const img = post.media$thumbnail ? post.media$thumbnail.url.replace('s72-c', 's1600') : 'https://via.placeholder.com/1200x800';const author = post.author[0].name.$t;const published = new Date(post.published.$t).toLocaleDateString('ar-EG', {year:'numeric', month:'long', day:'numeric'});sliderInner.innerHTML += `<div class="slide ${idx === 0 ? 'active' : ''}"><a href="${url}"><img src="${img}"><div class="slide-info"><div class="slide-title"><b>${title}</b></div><div class="slide-meta"><span><i class="bi bi-person-circle"></i> ${author}</span><span><i class="bi bi-calendar3"></i> ${published}</span></div></div></a></div>`;});let current = 0;const slides = sliderInner.querySelectorAll('.slide');const next = () => { slides[current].classList.remove('active'); current = (current + 1) % slides.length; slides[current].classList.add('active'); };const prev = () => { slides[current].classList.remove('active'); current = (current - 1 + slides.length) % slides.length; slides[current].classList.add('active'); };document.querySelector('.BTlef').onclick = (e) => { e.preventDefault(); next(); };document.querySelector('.BTRig').onclick = (e) => { e.preventDefault(); prev(); };setInterval(next, 5000);}};});})();//]]></script>
و نقوم بالحفظ و ثم قم بتحديث الموقع و شاهد النتيجة
ملاحظة
عند الذهاب للتنسيق ستجد انه تم اضافة صندوق جديد باسم السلايدر و الشبكة يمكنك الدخول اليه
و التحكم منه بأيقاف السلايدر او تشغيله
الكود لا يعتمد على مكتبة الجيكويري اي السلايدر سريع و لا يوثر على سرعة القالب
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب سلايدر شو أحترافي متحرك تلقائي في قالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
