سلايدر مواضيع عشوائية لمدونات بلوجر مع دليل التثبيت والتخصيص

كود سلايدر Blogger بدون jQuery: سريع ويعمل على الجوال

من أيام كنت أدور على سلايدر خفيف لمدونتي العربية. كل الأكواد اللي ألقاها إما ثقيلة تبطئ المدونة، أو ما تشتغل صح على الجوال. بعد تجربة لأكثر من 15 كود، وصلت لأفضل حل: كود متجاوب 100%، خفيف، ويعرض مواضيع عشوائية تلقائياً.

في هذا المقال، رح أعطيك خيارين: الأول للي يبون شي سريع وخفيف بدون تعقيد، والثاني للي يبون احترافية أكثر مع مميزات متقدمة. الاثنين مجربين على قوالب Blogger الحديثة.

الخيار الأول: سلايدر خفيف بدون jQuery (مُفضّل)

هذا الكود يستخدم CSS3 وJavaScript بحت، لا يحتاج لأي مكتبات خارجية. حجمه أقل من 5 كيلوبايت، ويعمل بسرعة على الجوال والكمبيوتر.

مميزات هذا الكود:

• متجاوب 100% (Responsive) - يتكيف مع أي شاشة
• أزرار تنقل يدوية (Previous/Next)
• نقاط指示 (Dots) للتنقل السريع
• تشغيل تلقائي كل 5 ثواني
• دعم اللمس (Swipe) للجوال
• صورة افتراضية لو المقال ما فيه صورة

طريقة التركيب:

ادخل على لوحة تحكم Blogger، روح لـ "المظهر" ثم "التخصيص". اختر "إضافة أداة" في المكان اللي تبي يظهر فيه السلايدر (يفضل أسفل الهيدر أو فوق المشاركات). اختر "HTML/JavaScript" والصق الكود التالي:

<style> .slider-container { position: relative; max-width: 100%; height: 300px; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .slide { display: none; width: 100%; height: 100%; position: relative; } .slide img { width: 100%; height: 100%; object-fit: cover; } .slide-title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: #fff; padding: 20px; font-family: 'Segoe UI', Tahoma, sans-serif; font-size: 18px; font-weight: bold; } .prev, .next { position: absolute; top: 50%; font-size: 20px; color: #fff; background: rgba(0,0,0,0.5); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transform: translateY(-50%); transition: background 0.3s; z-index: 10; } .prev:hover, .next:hover { background: rgba(0,0,0,0.8); } .prev { left: 15px; } .next { right: 15px; } .dots { text-align: center; position: absolute; bottom: 10px; width: 100%; z-index: 10; } .dot { height: 12px; width: 12px; margin: 0 5px; background: rgba(255,255,255,0.5); border-radius: 50%; display: inline-block; cursor: pointer; transition: background 0.3s; } .dot.active, .dot:hover { background: #fff; } @media (max-width: 768px) { .slider-container { height: 250px; } .slide-title { font-size: 14px; padding: 15px; } .prev, .next { width: 35px; height: 35px; font-size: 16px; } } </style> <div class="slider-container" id="random-slider"></div> <script> // إعدادات السلايدر var sliderConfig = { numPosts: 5, // عدد المواضيع المعروضة slideHeight: 300, // الارتفاع (يتغير تلقائياً في الجوال) autoPlay: true, // تشغيل تلقائي slideDelay: 5000, // مدة كل شريحة (بالملي ثانية) defaultImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzLMNK4I8sk65wnSceMYGFoPdUJB3afMuIY4uYNPi3va8_YFxqxQ2fw3JDSHrRd_KAQEJQSju-aVvZ2CyrkkB1Icv0KtJNTGMcNePFDEEKvujdjlhe4IvO5gNUF_hMn-OSWZhGQGNALo/s0/sin-imagen.png' }; // جلب المواضيع العشوائية function loadRandomPosts() { var script = document.createElement('script'); script.src = '/feeds/posts/default?orderby=published&alt=json-in-script&callback=showRandomPosts&max-results=50'; document.head.appendChild(script); } function showRandomPosts(json) { var entries = json.feed.entry || []; if (entries.length === 0) return; // ترتيب عشوائي entries.sort(function() { return 0.5 - Math.random(); }); var selected = entries.slice(0, sliderConfig.numPosts); var html = ''; selected.forEach(function(entry, index) { var title = entry.title.$t; var link = ''; var img = sliderConfig.defaultImage; // استخراج الرابط for (var i = 0; i < entry.link.length; i++) { if (entry.link[i].rel === 'alternate') { link = entry.link[i].href; break; } } // استخراج الصورة if (entry.content && entry.content.$t) { var content = entry.content.$t; var imgMatch = content.match(/<img[^>]+src=["']([^"']+)["']/); if (imgMatch) img = imgMatch[1]; } html += '<div class="slide" style="display:' + (index === 0 ? 'block' : 'none') + '">' + '<a href="' + link + '">' + '<img src="' + img + '" alt="' + title + '" onerror="this.src=\'' + sliderConfig.defaultImage + '\'"/>' + '<div class="slide-title">' + title + '</div>' + '</a></div>'; }); // أزرار التنقل html += '<a class="prev" onclick="changeSlide(-1)">❮</a>' + '<a class="next" onclick="changeSlide(1)">❯</a>' + '<div class="dots">'; for (var j = 0; j < selected.length; j++) { html += '<span class="dot ' + (j === 0 ? 'active' : '') + '" onclick="goToSlide(' + j + ')"></span>'; } html += '</div>'; document.getElementById('random-slider').innerHTML = html; initSlider(); } // التحكم في السلايدر var currentSlide = 0; var slides = []; var dots = []; var autoPlayInterval; function initSlider() { slides = document.getElementsByClassName('slide'); dots = document.getElementsByClassName('dot'); if (sliderConfig.autoPlay) startAutoPlay(); } function changeSlide(n) { showSlide(currentSlide + n); } function goToSlide(n) { showSlide(n); } function showSlide(n) { if (slides.length === 0) return; if (n >= slides.length) currentSlide = 0; else if (n < 0) currentSlide = slides.length - 1; else currentSlide = n; for (var i = 0; i < slides.length; i++) { slides[i].style.display = 'none'; dots[i].classList.remove('active'); } slides[currentSlide].style.display = 'block'; dots[currentSlide].classList.add('active'); } function startAutoPlay() { autoPlayInterval = setInterval(function() { changeSlide(1); }, sliderConfig.slideDelay); } // تحميل السلايدر loadRandomPosts(); </script>

تخصيص السلايدر:

لتغيير الإعدادات، عدل على الأرقام في بداية الكود:

• numPosts: 5 - عدد المواضيع في السلايدر (غيّر 5 لأي رقم تبي)
• slideHeight: 300 - الارتفاع بالبكسل (300 = 300px)
• slideDelay: 5000 - مدة كل شريحة (5000 = 5 ثواني)
• autoPlay: true - false لو تبي التوقف عن التشغيل التلقائي

الخيار الثاني: سلايدر FlexSlider الاحترافي

لو تبي سلايدر بمميزات أكثر وتأثيرات احترافية، FlexSlider هو الحل. يستخدمه مواقع كبيرة زي Yahoo News وDiscovery .

المميزات الإضافية:

• تأثيرات انتقالية متعددة (Slide, Fade)
• دعم كامل للمس (Touch/Swipe)
• تكيف تلقائي مع جميع أحجام الشاشات
• عرض معلومات إضافية (تاريخ النشر، التعليقات، التصنيفات)
• تصنيفات متعددة (Labels)

طريقة التركيب:

هذا الكود يحتاج تعديل في قالب المدونة. روح لـ "المظهر" ثم "تحرير HTML".

الخطوة 1: أضف الكود التالي قبل وسم </head>:

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css' rel='stylesheet'/> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js'></script>

الخطوة 2: أضف الأداة في المكان المطلوب (التخطيط > إضافة أداة > HTML/JavaScript):

<div class="flexslider mbt-slider"> <ul class="slides" id="featured-slides"></ul> </div> <script> var sliderSettings = { blogURL: window.location.origin, numPosts: 6, imageSize: 800, titleLength: 60 }; function loadFeaturedPosts() { var script = document.createElement('script'); script.src = sliderSettings.blogURL + '/feeds/posts/default?orderby=published&alt=json-in-script&callback=renderFeaturedPosts&max-results=20'; document.head.appendChild(script); } function renderFeaturedPosts(json) { var entries = json.feed.entry || []; entries.sort(function() { return 0.5 - Math.random(); }); var html = ''; for (var i = 0; i < Math.min(sliderSettings.numPosts, entries.length); i++) { var entry = entries[i]; var title = entry.title.$t.substring(0, sliderSettings.titleLength); var link = ''; var img = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqzLMNK4I8sk65wnSceMYGFoPdUJB3afMuIY4uYNPi3va8_YFxqxQ2fw3JDSHrRd_KAQEJQSju-aVvZ2CyrkkB1Icv0KtJNTGMcNePFDEEKvujdjlhe4IvO5gNUF_hMn-OSWZhGQGNALo/s0/sin-imagen.png'; for (var j = 0; j < entry.link.length; j++) { if (entry.link[j].rel === 'alternate') { link = entry.link[j].href; break; } } if (entry.content && entry.content.$t) { var match = entry.content.$t.match(/<img[^>]+src=["']([^"']+)["']/); if (match) img = match[1]; } html += '<li><a href="' + link + '"><img src="' + img + '" alt="' + title + '"/><p>' + title + '</p></a></li>'; } document.getElementById('featured-slides').innerHTML = html; // تفعيل FlexSlider setTimeout(function() { $('.mbt-slider').flexslider({ animation: "slide", slideshowSpeed: 4000, animationSpeed: 600, pauseOnHover: true, directionNav: true, controlNav: true, touch: true }); }, 1000); } loadFeaturedPosts(); </script>

نصائح مهمة للأداء

بعد تركيب السلايدر، تأكد من:

• ضغط الصور - استخدم صور بحجم مناسب (800px عرض كافي)
• Lazy Loading - الكود الأول يدعم تحميل الصور عند الحاجة
• عدد المواضيع - لا تزيد عن 8 مواضيع لسرعة التحميل
• اختبار الجوال - افتح مدونتك على هاتفك وتأكد من سهولة الاستخدام

حل المشاكل الشائعة

السلايدر لا يظهر، ما المشكلة؟

تأكد من إعدادات التلقيم (Feed) في مدونتك. روح لـ الإعدادات > الأخرى > التلقيم > السماح بالتلقيم الكامل. لو المشكلة مستمرة، جرب تغيير max-results لـ 10 بدل 50 في الكود.

الصور لا تظهر، ما الحل؟

الكود يستخدم صورة افتراضية لو المقال ما فيه صورة. تأكد إن رابط الصورة الافتراضية شغال. جرب تغيير رابط الصورة الافتراضية في الإعدادات.

كيف أخلي السلايدر يعرض مواضيع من تصنيف معين؟

غيّر رابط التلقيم في الكود. بدل: /feeds/posts/default?orderby=published استخدم: /feeds/posts/default/-/اسم-التصنيف?orderby=published (استبدل "اسم-التصنيف" بالتصنيف المطلوب).

السلايدر يبطئ مدونتي، كيف أحسن الأداء؟

قلل عدد المواضيع (numPosts) لـ 3 أو 4. تأكد من ضغط الصور قبل رفعها. استخدم الخيار الأول (بدون jQuery) لأنه أخف.

الخلاصة

السلايدر أداة قوية لعرض محتواك القديم للزوار الجدد. الخيار الأول (بدون jQuery) أنصح فيه للمدونات اللي تبني الأداء. الخيار الثاني (FlexSlider) للي يبون مظهر احترافي أكثر.

اللي يهم تذكره:

• اختبر السلايدر على الجوال قبل النشر
• لا تكثر المواضيع (3-5 كافية)
• تأكد من إعدادات التلقيم

شاركنا تجربتك: هل جربت تركب سلايدر في مدونتك؟ واجهت أي مشاكل؟

تاريخ التحديث: 15 مارس 2026

عناوين بديلة مقترحة:

1. أفضل سلايدر مواضيع عشوائية لـ Blogger: خفيف ومتجاوب 2026
2. 
   
3. دليل تركيب FlexSlider على مدونات بلوجر خطوة بخطوة
4. سلايدر مواضيع عشوائية مع دعم اللمس للجوال
5. تحسين أداء Blogger بسلايدر خفيف (أقل من 5 كيلوبايت)

Meta Description:

مواضيع قد تهمك ايضا :