ثلاث طرق احترافية لإنشاء سلايدر للمقالات والصور في بلوجر

📢 طريقة إنشاء سلايدر احترافي للمقالات أو الصور في بلوجر

هل ترغب في عرض مقالاتك أو صورك بطريقة جذابة وتفاعلية على مدونة بلوجر؟ إليك أداة سلايدر احترافية وسريعة التحميل، تعمل على جميع الأجهزة، وتُثبت بسهولة دون الحاجة إلى إضافات خارجية.

✅ مميزات الأداة:

• عرض تلقائي للمقالات أو الصور
• تصميم متجاوب يعمل على الجوال والكمبيوتر
• إمكانية تخصيص عدد الشرائح وسرعة التنقل
• دعم الصور والنصوص والروابط
• كود نظيف وسهل التثبيت

🧩 الكود الكامل للسلايدر:

<!-- سلايدر المقالات أو الصور -->
<div class="slider-container">
  <div class="slider">
    <div class="slide">
      <a href="رابط-المقال-1">
        <img src="رابط-الصورة-1.jpg" alt="عنوان المقال 1" />
        <p>عنوان المقال 1</p>
      </a>
    </div>
    <div class="slide">
      <a href="رابط-المقال-2">
        <img src="رابط-الصورة-2.jpg" alt="عنوان المقال 2" />
        <p>عنوان المقال 2</p>
      </a>
    </div>
    <!-- أضف المزيد حسب الحاجة -->
  </div>
</div>

<style>
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 20px auto;
}
.slider {
  display: flex;
  animation: scroll 20s linear infinite;
}
.slide {
  min-width: 300px;
  margin: 0 10px;
  text-align: center;
}
.slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.slide p {
  font-size: 16px;
  margin-top: 8px;
  color: #333;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>
  

🛠️ خطوات التثبيت في بلوجر:

1. افتح لوحة التحكم في بلوجر
2. اذهب إلى المظهر → تعديل HTML
3. ابحث عن </body> وألصق الكود قبله مباشرة
4. عدّل روابط الصور والمقالات حسب محتوى مدونتك
5. احفظ التغييرات وشاهد السلايدر يعمل فورًا

🎨 تخصيص إضافي:

• لتغيير سرعة السلايدر: عدّل animation: scroll 20s إلى 10s أو 30s
• لتغيير عدد الشرائح الظاهرة: عدّل min-width في .slide
• لإضافة تأثيرات انتقال: استخدم transition داخل .slide

📈 تحسين SEO للسلايدر:

• استخدم صورًا مضغوطة بصيغة WebP
• أضف alt لكل صورة يعكس محتوى المقال
• اربط كل شريحة بمقال داخلي لزيادة التفاعل
• اجعل العناوين قصيرة وواضحة

📌 مثال حي على الاستخدام:

<div class="slide">
  <a href="https://yourblog.com/post1">
    <img src="https://yourblog.com/images/post1.webp" alt="أفضل أدوات بلوجر 2025" />
    <p>أفضل أدوات بلوجر 2025</p>
  </a>
</div>
  

📢 طريقة إنشاء سلايدر يدوي احترافي للمقالات أو الصور في بلوجر

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

✅ مميزات السلايدر:

• أزرار تنقل يدوية (يمين / يسار)
• تصميم متجاوب وسهل التخصيص
• دعم الصور والعناوين والروابط
• كود نظيف بدون مكتبات خارجية

🧩 الكود الكامل للسلايدر:

<div class="manual-slider-container">
  <button class="prev" onclick="moveSlide(-1)">❮</button>
  <div class="manual-slider">
    <div class="manual-slide active">
      <a href="رابط-المقال-1">
        <img src="رابط-الصورة-1.jpg" alt="عنوان المقال 1">
        <p>عنوان المقال 1</p>
      </a>
    </div>
    <div class="manual-slide">
      <a href="رابط-المقال-2">
        <img src="رابط-الصورة-2.jpg" alt="عنوان المقال 2">
        <p>عنوان المقال 2</p>
      </a>
    </div>
    <!-- أضف المزيد من الشرائح حسب الحاجة -->
  </div>
  <button class="next" onclick="moveSlide(1)">❯</button>
</div>

<style>
.manual-slider-container {
  position: relative;
  max-width: 100%;
  margin: 20px auto;
  overflow: hidden;
}
.manual-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.manual-slide {
  min-width: 100%;
  display: none;
  text-align: center;
}
.manual-slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.manual-slide p {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
.manual-slide.active {
  display: block;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.manual-slide');

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove('active');
    if (i === index) slide.classList.add('active');
  });
}

function moveSlide(step) {
  currentSlide += step;
  if (currentSlide < 0) currentSlide = slides.length - 1;
  if (currentSlide >= slides.length) currentSlide = 0;
  showSlide(currentSlide);
}

document.addEventListener('DOMContentLoaded', () => {
  showSlide(currentSlide);
});
</script>
  

🛠️ خطوات التثبيت في بلوجر:

1. افتح لوحة التحكم → المظهر → تعديل HTML
2. الصق الكود أعلاه قبل الوسم </body>
3. عدّل روابط الصور والعناوين حسب مقالاتك
4. احفظ التغييرات وشاهد السلايدر يعمل فورًا

📌 ملاحظات إضافية:

• يمكنك إضافة عدد غير محدود من الشرائح داخل .manual-slider
• يمكنك تعديل الألوان والخطوط حسب تصميم مدونتك
• السلايدر لا يعتمد على مكتبات خارجية مثل jQuery

📢 سلايدر تلقائي + يدوي للمقالات أو الصور في بلوجر

هذا السلايدر يجمع بين التشغيل التلقائي وأزرار التنقل اليدوي، ويُعد مثاليًا لعرض المقالات أو الصور بطريقة جذابة وسلسة على جميع الأجهزة.

✅ المميزات:

• تشغيل تلقائي مع إمكانية الإيقاف
• أزرار تنقل يدوية (يمين / يسار)
• تصميم متجاوب وسهل التخصيص
• كود نظيف بدون مكتبات خارجية

🧩 الكود الكامل:

<div class="hybrid-slider-container">
  <div class="hybrid-slider">
    <div class="hybrid-slide active">
      <a href="رابط-المقال-1">
        <img src="رابط-الصورة-1.jpg" alt="عنوان المقال 1">
        <p>عنوان المقال 1</p>
      </a>
    </div>
    <div class="hybrid-slide">
      <a href="رابط-المقال-2">
        <img src="رابط-الصورة-2.jpg" alt="عنوان المقال 2">
        <p>عنوان المقال 2</p>
      </a>
    </div>
    <!-- أضف المزيد حسب الحاجة -->
  </div>
  <button class="prev" onclick="moveHybridSlide(-1)">❮</button>
  <button class="next" onclick="moveHybridSlide(1)">❯</button>
</div>

<style>
.hybrid-slider-container {
  position: relative;
  max-width: 100%;
  margin: 20px auto;
  overflow: hidden;
}
.hybrid-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.hybrid-slide {
  min-width: 100%;
  display: none;
  text-align: center;
}
.hybrid-slide img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.hybrid-slide p {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
.hybrid-slide.active {
  display: block;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 24px;
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }
</style>

<script>
let hybridIndex = 0;
const hybridSlides = document.querySelectorAll('.hybrid-slide');

function showHybridSlide(index) {
  hybridSlides.forEach((slide, i) => {
    slide.classList.remove('active');
    if (i === index) slide.classList.add('active');
  });
}

function moveHybridSlide(step) {
  hybridIndex += step;
  if (hybridIndex < 0) hybridIndex = hybridSlides.length - 1;
  if (hybridIndex >= hybridSlides.length) hybridIndex = 0;
  showHybridSlide(hybridIndex);
}

function autoHybridSlide() {
  hybridIndex++;
  if (hybridIndex >= hybridSlides.length) hybridIndex = 0;
  showHybridSlide(hybridIndex);
}

document.addEventListener('DOMContentLoaded', () => {
  showHybridSlide(hybridIndex);
  setInterval(autoHybridSlide, 5000); // تغيير الشريحة كل 5 ثوانٍ
});
</script>
  

📌 خطوات التثبيت:

1. افتح لوحة التحكم → المظهر → تعديل HTML
2. الصق الكود أعلاه قبل الوسم </body>
3. عدّل روابط الصور والعناوين حسب مقالاتك
4. احفظ التغييرات وشاهد السلايدر يعمل تلقائيًا ويدويًا

💡 هل ترغب بإضافة نقاط تنقل (Dots) أو مؤقت توقف عند التفاعل؟ يمكنني توليد نسخة متقدمة فورًا.