تركيب سلايدر شو 3 شرائح متحركة في قالب بلوجر
يُعد السلايدر من العناصر المهمة في تصميم المواقع الحديثة، حيث يساعد على عرض المحتوى بشكل جذاب ومنظم في الصفحة الرئيسية. من خلال السلايدر يمكن إبراز أهم المقالات أو الخدمات أو العروض بطريقة مرئية تلفت انتباه الزائر منذ اللحظة الأولى لدخوله إلى الموقع.
- أهمية السلايدر في تصميم المواقع
حيث يسمح السلايدر بعرض عدة مواضيع أو صور في مساحة صغيرة من الصفحة، وذلك عبر الانتقال التلقائي بين الشرائح. هذه الميزة تساعد أصحاب المواقع على إبراز أهم المقالات أو الأخبار أو المنتجات دون الحاجة إلى شغل مساحة كبيرة من التصميم، مما يجعل الصفحة تبدو أكثر ترتيبًا واحترافية.
- تحسين تجربة المستخدم
يساهم السلايدر في تحسين تجربة المستخدم داخل الموقع، لأنه يسهل على الزائر اكتشاف المحتوى المميز بسرعة. فعند عرض العناوين والصور بطريقة متحركة وجذابة، يزداد احتمال تفاعل الزائر مع المحتوى والنقر على المقالات المعروضة داخل السلايدر.
- جذب انتباه الزائر
من أهم فوائد السلايدر أنه يجذب انتباه الزائر بصريًا. فالحركة والصور الكبيرة والعناوين الواضحة تجعل الزائر يركز على المحتوى المهم الذي يرغب صاحب الموقع في الترويج له. لذلك يتم استخدام السلايدر غالبًا لعرض المقالات المميزة أو أحدث المنشورات.
- تنظيم الصفحة الرئيسية
يساعد السلايدر أيضًا في تنظيم الصفحة الرئيسية للموقع، حيث يمكن استخدامه لعرض أهم الأقسام أو المقالات بطريقة مرتبة. هذا الأمر يعطي انطباعًا احترافيًا عن الموقع ويجعل التصميم أكثر أناقة ووضوحًا.
- الخلاصة
تركيب السلايدر في قالب بلوجر يعد إضافة مفيدة لتحسين مظهر الموقع وجذب الزوار وعرض المحتوى المهم بطريقة جذابة. ومع الاستخدام الصحيح للصور والعناوين المناسبة، يمكن للسلايدر أن يكون عنصرًا فعالًا في إبراز أفضل ما يقدمه الموقع للزائر.
شرح تركيب سلايدر شو في قالب بلوجر
الأكواد الخاصة بالسلايدر شو
الذهاب الى المظهرتعديل HTML البحث عن </head> ولصق الكود التالي أعلاه
<style>#imageslider .post-label{opacity:0;transition:opacity 0.5s ease,transform 0.5s ease;transform:translateX(0);pointer-events:none;}#imageslider .post-label{transform:translateX(100px)}#imageslider:hover .post-label{opacity:0.8;transform:translateX(0);pointer-events:auto}#imageslider{max-width:1340px;width: 100%;margin:0 auto 20px;background-color:#fff;height:300px;overflow:hidden;position:relative}@keyframes imageslider-key-next{0%{left:100%}100%{left:0}}@keyframes imageslider-key-left{0%{left:0}100%{left:-100%}}@keyframes imageslider-key-previous{0%{left:-100%}100%{left:0}}@keyframes imageslider-key-right{0%{left:0}100%{left:100%}}#imageslider >div,#imageslider li{list-style:none;margin:unset;padding:unset}#imageslider >div >div{position:absolute;left:100%;top:0;width:100%;height:100%;visibility:hidden;animation-timing-function:ease-in-out;animation-fill-mode:forwards;display:flex;gap:10px;box-sizing:border-box;padding:10px}#imageslider >div >div.active{visibility:visible;left:0}#imageslider >div >div.left{animation-name:imageslider-key-left}#imageslider >div >div.next{animation-name:imageslider-key-next}#imageslider >div >div.right{animation-name:imageslider-key-right}#imageslider >div >div.previous{animation-name:imageslider-key-previous}.slider-item{flex:1;background:#000;position:relative;overflow:hidden;border-radius:8px}.slider-item a{display:block;width:100%;height:100%}.slider-item img{width:100%;height:100%;object-fit:cover}.slide-info{position:absolute;bottom:-100%;color:#fff;padding:30px 10px 20px;width:100%;text-align:center;background:linear-gradient(to top,#353840,#00000047);transition:bottom 0.4s ease;pointer-events:none}.slider-item:hover .slide-info{bottom:0}.slide-info b{display:block;font-size:120%;margin-bottom:5px}.meta{font-size:90%;opacity:0.8;display:flex;justify-content:center;gap:15px;margin-top:8px}.meta span{display:flex;align-items:center;gap:5px}#imageslider button{position:absolute;top:calc(50% - 24px);border:0;background-color:#fff;opacity:0.7;width:48px;height:48px;font-size:24px;border-radius:50%;cursor:pointer;z-index:10}#imageslider button:hover{opacity:1}.post-label{position:absolute;top:10px;right:10px;background:#ff5a5f;color:white;padding:5px 10px;border-radius:5px;font-size:13px;z-index:2;font-weight:bold}.BTlef{left:26px}.BTRig{right:26px}@media screen and (max-width:768px){#imageslider >div >div{flex-direction:column}.slider-item{flex:1 0 100%;height:300px}}</style>
نختار المكان المناسب ليظهر السلايدرالافضل فوق رسائل المدونة الألكترونية أو اسفل الهيدر
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:section class='slider-section' id='slider-section' maxwidgets='1' showaddelement='yes'><b:widget id='HTML106' locked='false' title='' type='HTML' version='2' visible='true'><b:widget-settings><b:widget-setting name='content'>slider</b:widget-setting></b:widget-settings><b:includable id='main'><b:if cond='data:title != ""'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><div id='imageslider'><div/><button class='BTlef'>❯</button><button class='BTRig'>❮</button></div></div><b:include name='quickedit'/></b:includable></b:widget></b:section></b:if>
ثم نقوم بالبحث عن </body> و نلصق الكود التالي اعلاه
<script type='text/javascript'>//<![CDATA[document.addEventListener("DOMContentLoaded", function () {const currentUrl = window.location.origin;const baseUrl = currentUrl.replace(/^https?:\/\//, '').replace(/\/$/, '');const feedUrl = `https://${baseUrl}/feeds/posts/default?alt=json&max-results=15`;console.log('Fetching from:', feedUrl);fetch(feedUrl).then(res => {if (!res.ok) {throw new Error('Network response was not ok');}return res.json();}).then(data => {if (!data.feed.entry || data.feed.entry.length === 0) {throw new Error('No posts found');}const entries = data.feed.entry;const sliderContainer = document.querySelector("#imageslider > div");sliderContainer.innerHTML = '';const slides = [];for (let i = 0; i < entries.length; i += 3) {const group = entries.slice(i, i + 3);const slide = document.createElement("div");group.forEach(entry => {const title = entry.title.$t;const labels = entry.category ? entry.category.map(cat => cat.term) : [];const label = labels.length > 0 ? labels[0] : "غير مصنف";const link = entry.link.find(l => l.rel === "alternate").href;const content = entry.content.$t || "";const imgMatch = content.match(/<img.*?src="(.*?)"/i);let imgSrc = imgMatch ? imgMatch[1] : "https://via.placeholder.com/1600x900?text=No+Image";if (imgSrc.includes("blogger.com")) {imgSrc = imgSrc.replace(/\/s\d+-c/, '/s1600');imgSrc = imgSrc.split("?")[0];}const author = entry.author ? entry.author[0].name.$t : "مجهول";const publishedDate = new Date(entry.published.$t);const formattedDate = publishedDate.toLocaleDateString('ar-AR', {year: 'numeric',month: 'long',day: 'numeric'});const item = document.createElement("div");item.className = "slider-item";item.innerHTML = `<div class="post-label">${label}</div><a href="${link}" target="_blank"><img src="${imgSrc}" alt="${title}" loading="lazy" /><div class="slide-info"><b>${title}</b><div class="meta"><span><i class="fas fa-user"></i> ${author}</span><span><i class="fas fa-calendar-alt"></i> ${formattedDate}</span></div></div></a>`;slide.appendChild(item);});slides.push(slide);sliderContainer.appendChild(slide);}imagesliders({selector: "#imageslider",time: 500,autoTime: 3000});}).catch(error => {console.error('Error fetching posts:', error);const sliderElement = document.querySelector('#imageslider');if (sliderElement) {sliderElement.innerHTML = `<div style="text-align: center; padding: 50px; background: #f8f9fa; border-radius: 10px;"><p style="color: #dc3545; font-size: 18px; margin-bottom: 10px;">❌ حدث خطأ في تحميل السلايدر</p><p style="color: #6c757d; font-size: 14px;">يرجى التأكد من اتصال الإنترنت أو المحاولة لاحقاً</p><button onclick="location.reload()" style="background: #007bff;color: white;border: none;padding: 8px 20px;border-radius: 5px;cursor: pointer;margin-top: 10px;font-size: 14px;">إعادة المحاولة</button></div>`;}});function imagesliders(o) {const time = o.time || 500;const autoTime = o.autoTime || 5000;const selector = o.selector;const imageslider = document.querySelector(selector);if (!imageslider) return;const buttonLeft = imageslider.querySelector(".BTRig");const buttonRight = imageslider.querySelector(".BTlef");const wrapper = imageslider.querySelector("div");if (!wrapper || !buttonLeft || !buttonRight) return;const slides = wrapper.children;let activeIndex = 0;let isAnimating = false;let autoScroll;if (slides.length === 0) return;for (let slide of slides) {slide.style.animationDuration = time + "ms";}slides[activeIndex].classList.add("active");function goToNext() {if (isAnimating) return;isAnimating = true;const nextIndex = (activeIndex + 1) % slides.length;slides[nextIndex].classList.add("next");slides[activeIndex].classList.add("left");slides[nextIndex].classList.add("active");setTimeout(() => {slides[activeIndex].classList.remove("active", "left");slides[nextIndex].classList.remove("next");activeIndex = nextIndex;isAnimating = false;}, time);}function goToPrev() {if (isAnimating) return;isAnimating = true;const prevIndex = (activeIndex - 1 + slides.length) % slides.length;slides[prevIndex].classList.add("previous");slides[activeIndex].classList.add("right");slides[prevIndex].classList.add("active");setTimeout(() => {slides[activeIndex].classList.remove("active", "right");slides[prevIndex].classList.remove("previous");activeIndex = prevIndex;isAnimating = false;}, time);}function startAutoScroll() {if (autoScroll) clearInterval(autoScroll);autoScroll = setInterval(goToNext, autoTime);}function stopAutoScroll() {if (autoScroll) {clearInterval(autoScroll);autoScroll = null;}}startAutoScroll();imageslider.addEventListener("mouseenter", () => {console.log('Mouse entered - auto scroll stopped');stopAutoScroll();imageslider.style.opacity = '0.95';});imageslider.addEventListener("mouseleave", () => {console.log('Mouse left - auto scroll resumed');startAutoScroll();imageslider.style.opacity = '1';});buttonLeft.addEventListener("click", (e) => {e.preventDefault();console.log('Left button clicked');goToPrev();});buttonRight.addEventListener("click", (e) => {e.preventDefault();console.log('Right button clicked');goToNext();});buttonLeft.style.cursor = 'pointer';buttonRight.style.cursor = 'pointer';}});//]]></script>
التعديلات
ستجد بهذا الكود رقم 15 و هو المسؤل عن عدد المواضيع اللتي تظهر بداخل السلايدر اذا اردت تغير العدد غير الرقم فقط
https://${baseUrl}/feeds/posts/default?alt=json&max-results=15`
ملاحظة
أذا القالب الخاص بك لا يحتوي على مكتبة الايقونات Font Awesome يجب اضافة المكتبة اسفل <head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب سلايدر شو متحرك تلقائي 3 شرائح لقوالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.
