تم تصميم هذا السلايد باستخدام أكواد HTML و CSS و JavaScript. يحتوي على زري تحكم لتغيير الصورة وأيضا يحتوي على النقاط التي تبين رقم الصورة المفتوحة. من ميزات هذه الإضافة انه لا يمكن أن تتغير الصور تلقائيًا ولكن يمكن تغييرها يدويًا بمساعدة الأزرار.
تركيب الاسلايد في مدونة بلوجر
الخطوة الأولى : إضافة ملف الخطوط الأيقونات في قالب بلوجر، يرجى إضافة هذا الكود في حالة القالب الخاص بك لا يحتوي على هذا الكود.
- انتقل الى منصة بلوجر
- من القائمة الجانبية اختر المظهر
- قم بحفظ نسخة احتياطية من القالب الخاص بك
- اضغط على تحرير html
- ابحث عن الوسم <head>
- انسخ الكود التالي والصقه تحت الوسم <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
الخطوة الثانية : ابحث عن الوسم ]]></b:skin> والصق الكود التالي تحته مباشرةً.
<style>
#mssliderlu{width:100%;height:300px;margin:20px auto;position:relative;overflow:hidden;box-shadow:-2px 5px 10px rgba(0,0,0,0.4);}
.slide{width:500px;height:300px;display:none;animation-name:fade;animation-duration:1s}
#mssliderlu img{width:100%}
@keyframes fade{from{opacity:0.5}to{opacity:1}}
.mscontrolslu{position:absolute;top:50%;transform:translateY(-50%);font-size:1em;padding:15px 10px;border-radius:5px}
.mscontrolslu{background:white;transition:0.3s}
.mscontrolslu:active{color:grey}
#left-arrow{left:10px}
#right-arrow{right:10px}
#msdotslu{text-align:center}
.dot{display:inline-block;background:grey;padding:8px;border-radius:50%;margin:5px}
.active{background:crimson}
</style>الخطوة الثالثة : إضافة كود js، لإضافة كود js بشكل صحيح قم بالبحث عن </body> والصق الكود التالي فوقه مباشرةً.
<script type="text/javascript">/*<![CDATA[*/var slides=document.querySelectorAll(".slide");var dots=document.querySelectorAll(".dot");var index=0;function prevSlide(a){index+=a;console.log("prevSlide is called");changeSlide()}function nextSlide(a){index+=a;changeSlide()}changeSlide();function changeSlide(){if(index>slides.length-1){index=0}if(index<0){index=slides.length-1}for(let i=0;i<slides.length;i++){slides[i].style.display="none";dots[i].classList.remove("active")}slides[index].style.display="block";dots[index].classList.add("active")};/*]]>*/</script>
الخطوة الرابعة :إضافة أكواد HTML، تقوم بإضافة هذا الكود في أي مكان ترغب به مثلاً، داخل مشاركات بلوجر أو الصفحات الثابتة أو حتى في الصفحة الرئيسية يمكنك إضافته عن طريق نسخ الكود التالي.
<div id="mssliderlu">
<div class="slide" style="background:dodgerBlue">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj2hv2wh7mq8dqdjt7m3.jpg">
</div>
<div class="slide" style="background:coral">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzpnjc1nwtzhzktqczzx.jpg">
</div>
<div class="slide" style="background:crimson">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtemp7u33vwikpig3sdm.jpg">
</div>
<div class="slide" style="background:#6edf10">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g61gmlb6rctgh2r92cyw.jpg">
</div>
<span class="mscontrolslu" onclick="prevSlide(-1)" id="right-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
<span class="mscontrolslu" id="left-arrow" onclick="nextSlide(1)"><i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</div>
<div id="msdotslu">
<span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>
لان كل ما عليك فعله هو تغيير روابط الصور، بالصور التي تريد عرضها في السلايد.
إذا كنت ترغب بإضافة هذا السلايد داخل أداة html/javascript بشكل مباشرة، فيمكنك عن طريق نسخ الكود التالي.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<style>
#mssliderlu{width:100%;height:300px;margin:20px auto;position:relative;overflow:hidden;box-shadow:-2px 5px 10px rgba(0,0,0,0.4);}
.slide{width:500px;height:300px;display:none;animation-name:fade;animation-duration:1s}
#mssliderlu img{width:100%}
@keyframes fade{from{opacity:0.5}to{opacity:1}}
.mscontrolslu{position:absolute;top:50%;transform:translateY(-50%);font-size:1em;padding:15px 10px;border-radius:5px}
.mscontrolslu{background:white;transition:0.3s}
.mscontrolslu:active{color:grey}
#left-arrow{left:10px}
#right-arrow{right:10px}
#msdotslu{text-align:center}
.dot{display:inline-block;background:grey;padding:8px;border-radius:50%;margin:5px}
.active{background:crimson}
</style>
<div id="mssliderlu">
<div class="slide" style="background:dodgerBlue">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj2hv2wh7mq8dqdjt7m3.jpg">
</div>
<div class="slide" style="background:coral">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzpnjc1nwtzhzktqczzx.jpg">
</div>
<div class="slide" style="background:crimson">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtemp7u33vwikpig3sdm.jpg">
</div>
<div class="slide" style="background:#6edf10">
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g61gmlb6rctgh2r92cyw.jpg">
</div>
<span class="mscontrolslu" onclick="prevSlide(-1)" id="right-arrow"><i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
<span class="mscontrolslu" id="left-arrow" onclick="nextSlide(1)"><i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
</div>
<div id="msdotslu">
<span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
</div>
<script type="text/javascript">/*<![CDATA[*/var slides=document.querySelectorAll(".slide");var dots=document.querySelectorAll(".dot");var index=0;function prevSlide(a){index+=a;console.log("prevSlide is called");changeSlide()}function nextSlide(a){index+=a;changeSlide()}changeSlide();function changeSlide(){if(index>slides.length-1){index=0}if(index<0){index=slides.length-1}for(let i=0;i<slides.length;i++){slides[i].style.display="none";dots[i].classList.remove("active")}slides[index].style.display="block";dots[index].classList.add("active")};/*]]>*/</script>
وبذلك نكون قد انتهينا من إضافة اليوم، إذا واجهتك اي مشكلة في تركيب الإضافة لا تتردد في التواصل معنا عبر صفحة اتصل بنا أو حسابنا عبر تليجرام وسوف نقوم بحلها في أقرب وقت ممكن.
هذه الإضافة حصرية بموقع قوالب لونا لذلك عند إعادة مشاركة الإضافة يرجى ذكر المصدر.