يرجى متابعة الموقع للحصول على كل ما هو جديد وحصري . متابعة

إضافة سلايد شو لعرض الصور في مدونة بلوجر بشكل متجاوب جديد 2022

طريقة إضافة شريط تمرير الصورة "سلايد عرض الصور" باستخدام HTML و CSS في مدونة بلوجر. يعد سلايد عرض الصور إضافة مهمة في المواقع الإلكترونية
إضافة سلايد شو لعرض الصور في مدونة بلوجر بشكل متجاوب جديد 2022
مرحبا بكم في موقع قوالب لونا، في هذا الموضوع، سنتعلم طريقة إضافة شريط تمرير الصورة "سلايد عرض الصور" باستخدام HTML و CSS في مدونة بلوجر. يعد سلايد عرض الصور إضافة مهمة في المواقع الإلكترونية، وأيضاً يتم ترتيب الصور والمعلومات بشكل جميل باستخدام أشرطة التمرير في هذه الإضافة مما يجعلها تبدو بمظهر احترافي في مدونة بلوجر. 

تم تصميم هذا السلايد باستخدام أكواد 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>

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

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

تعليقان (2)

  1. شكراً جداً شرح ممتاز
    1. عفوا اخي، أن شاء الله سيكون هناك تصميم جديد سوف يتم نشره قريباً
إمتداد ويب © 2021 - 2022