كيفية إنشاء سلايدر في مقال بلوجر Slideshow

القبطان تك - Alkoptan Tech

سنتحدث اليوم عن كيفية إنشاء سلايدر في مقال بلوجر Slideshow، داخل المقال باستخدام CSS و JavaScript، الكود المستخدم في الشرح بسيط وخفيف ويمكنك التعديل عليه بسهولة، ويمكنك أيضاً إضافة أي عدد من الصور.

كيفية إنشاء سلايدر في مقال بلوجر Slideshow

هل تبحث عن كيفية إنشاء سلايدر في مقال بلوجر Slideshow؟

تتوفر العديد من المكونات الإضافية في WordPress والتي تتيح لك إنشاء سلايدر داخل المقال Slideshow ببضع نقرات فقط. ولكن، إذا كانت مدونتك مستضافة على Blogger (Blogspot)، فلن تتمكن من إنشاء سلايدر داخل المقال Slideshow باستخدام مكون إضافي.

غالبًا ما يكون سلايدر في مقال بلوجر "Slideshow" مهم فى بعض المقالات في المدونة الخاص بك، لعرض شرائح بالصور للمقارنة أو لعرض مجموعة صور بدلاً من وجودها صورة تلو الأخرى.

ومع ذلك، لا يحتوي Blogger رسميًا على أي مكون يتيح ذلك، ولهذا السبب، يتعذر على مستخدمي مدونات بلوجر Blogger استخدام سلايدر "Slideshow" داخل منشور المدونة.

مرحبًا بالمدونين، سأشرح في منشور المدونة هذا كيفية إنشاء سلايدر في مقال بلوجر Blogger Post Slideshow، أتمنى أن نكون جميعًا على دراية بأن Google Blogger أو Blogspot لا يسمحان بمكونات إضافية مثل WordPress، ومع ذلك، بمساعدة هذا المقال، يمكنك بسهولة إنشاء سلايدر في مقال بلوجر Slideshow، سأوضح الطريقة خطوة بخطوة فقط تابع الشرح.

طريقة إنشاء سلايدر في مقال بلوجر Slideshow؟

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

مثال

1 / 3

القبطان تك

2 / 3

text">يمكنك وضع العنوان هنا

3 / 3

سلايدر

❮ ❯

الكود



<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 640px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
<body>

<div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="رابط الصورة" style="width: 100%;" />
  <div class="text">عنوان الصورة</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="رابط الصورة" style="width: 100%;" />
  <div class="text">عنوان الصورة</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="رابط الصورة" style="width: 100%;" />
  <div class="text">عنوان الصورة</div>
</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

</div>
<br />

<div style="text-align: center;">
  <span class="dot" onclick="currentSlide(1)"></span> 
  <span class="dot" onclick="currentSlide(2)"></span> 
  <span class="dot" onclick="currentSlide(3)"></span> 
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

طريقة إضافة سلايدر في مقال بلوجر Slideshow

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

ملحوظة مهمة

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

كيفية استخدام كود سلايدر داخل المقال والتعديل عليه:

يمكنك وضع رابط الصورة فى هذا المكان <img src="رابط الصوره" style="width: 100%;" />
يمكنك وضع عنوان للصورة من هنا <div class="text">عنوان الصورة</div>
يمكنك التعديل على حجم الصور من هذا الكود max-width: 640px;
يمكنك زيادة عدد الشرائح كما تشاء بالتعديل على الكود وزيادة رقم الشرائح.

- الصور المستخدمة في الشرائح يجب رفعها أولاً على بلوجر ونسخ رابط الصورة لاستخدامه فى كود سلايدر، وللمحافظة على السرعة قم بتحويل الصور الي Webp بنفس الجودة وحجم أقل.

الخـــلاصـــة

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

تعديل المقال

الأقسام CSS

إذا أعجبك هذا المقال، يرجى مشاركته مع أصدقائك ومساعدتنا في نشر الكلمة.

تعليقات

إرسال تعليق

سعدنا بوجودك 😍 شكراً لك اترك تعليقك بمدى أستفادتك من المحتوى دعمنا لنا وسيتم الرد عليك في أقرب وقت. يسعدنا دائماً اقتراحاتكم بخصوص المحتوى وأذا كان لديك أى أستفسار لاتترد بالتعليق أو المراسلة عبر صندوق البريد.

العلامات الرئيسية

كيفية إنشاء سلايدر في مقال بلوجر Slideshow