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

بنسبة لمعاينة السكريبت ستجده في اسفل المقالة.

+ads+

1-تأكد من وجود مكتبة jQuery في قالبك:

قم بالبحث في في وضع HTML عن طريق الضغط على يمين الفئرة بداخل صندوق HTML ثم Ctr+f ثم إبحث عن jquery. إن لم تجده فقط قم بوضع هذا الكود اسفل <head>.

+ads+


<script src='https://code.jquery.com/jquery-3.5.1.min.js'/>

2-تركيب السكريبت:

اولا سنقوم بتركيب جافا سكريبت الخاص به:

قم بوضع الكود اسفله بعد </body> موجود في نهاية كود القالب.


<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript"></script>
<script type="text/javascript">
   //<![CDATA[ 
    $(document).ready(function(){
      $('.slider-article').slick({
        rtl: true,
        dots: true,
        prevArrow : '<button type="button" class="slick-prev">‹</button>',
        nextArrow : '<button type="button" class="slick-next">›</button>',
      });
    });
   //]]> 
</script>

تانيا تركيب التنسيق الخاص به:

+ads+

نضعه قبل التنسيق الموجود في القالب او بعد </head>.


<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" type="text/css"></link>
<style>
.slider-article {width: 100%;margin: auto;max-width: 900px}
.photo-article {width: 100%;max-height: 250px;}
.meta-article {position: absolute;bottom: 5px;display: flex;width: calc(100%/7);}
.title-article {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;border-radius: 50px 0 0 50px;margin-left: auto;height: 30px;padding: 0 10px 0 15px;background-color: #fefefe;color: #161617;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 7%);-webkit-transition: all .1s ease;transition: all .1s ease;}
.category-article {white-space: nowrap;text-overflow: ellipsis;border-radius: 0px 50px 50px 0px;height: 30px;padding: 0 10px 0 15px;background-color: #fefefe;box-shadow: 0 2px 10px 0 rgb(0 0 0 / 7%);-webkit-transition: all .1s ease;transition: all .1s ease;}
.slick-list {width: calc(100% - 50px);margin: auto!important;}
.slick-prev, .slick-next {font-size: 30px;font-weight: 600;position: absolute;top: 50%;display: block;width: 23px;height: 23px;padding: 0px 0px 7px 0px;
    -webkit-transform: translate(0, -50%);-ms-transform: translate(0, -50%);transform: translate(0, -50%);cursor: pointer;border: none;outline: none;border-radius: 50%;box-shadow: 0px 0px 7px;line-height: 0;}
.slick-arrow:hover {background-color: gold;}
.slick-prev {right: -11px;}
.slick-next {left: -11px;}
/* Dots */
.slick-dotted.slick-slider{margin-bottom: 30px;}
.slick-dots{position: absolute;bottom: -25px;display: block;width: 100%;padding: 0;margin: 0;list-style: none;text-align: center;}
.slick-dots li{position: relative;
display: inline-block;
width: 20px;height: 20px;margin: 0 5px;padding: 0;cursor: pointer;}
.slick-dots li button{font-size: 0;line-height: 0;display: block;width: 10px;height: 10px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;border-radius: 50%;box-shadow: 0px 0px 5px;}
.slick-dots li button:hover,.slick-dots li button:focus{outline: none;}
.slick-dots li.slick-active button{opacity: .85;color: black;}
.slick-dots button:hover{background-color: gold;}
@media only screen and (max-width: 600px) {
  .slick-list {width: 100%;}
  .slick-next {left: 5px;}
  .slick-prev {right: 5px;}
  .slick-prev, .slick-next {z-index: 9;}
  .title-article, .category-article {padding: 0 5px 0 5px;}
  .meta-article {flex-direction: column-reverse;}
  .title-article {max-width: calc(100% - 10px);}
  .category-article {margin-left: auto;border-radius: 50px 0px 0px 50px;}
}
</style>

ثالثا تركيب كود html لعرض سلايدر :

ربما سيكون صعبا لمن لايعلم لغة html حسنا في الفيديو اسفله ربما ساعطيك تلميحا ,لاتنسى إلقاء نضرة في الصورة اسفله للدخول بمحرر المواقع في المتصفحات.


<b:if cond='data:view.isMultipleItems'>              
<div class='slider-article'>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/04/blog-post.html'>
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJsCd_AqZfRz5SkhM3Z1oGBr7BJsYoI-DelOPPAwj5O-X1ihA2RQ7qIfLlWmut4tMaFo7lZ2pWw22EPCqu09VnDE9aSKpAc_SPeHRisdQ6X3fyNko3RgYrE-jNqVJsi1CpKL-VEbD4KAM/w400-h206/Screenshot_12.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/04/blog-post.html'>سكريبت(كود) شريط الأخبار متحرك جاهزلمدونتك بلوجر</a></div>
      <span class='category-article'>
       <a href='https://libraryscripts.blogspot.com/search/label/%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA%D8%A7%D8%AA'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>سكريبتات</a>
      </span>
      </div>
     </a>
    </div>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/04/webp.html'> 
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6moCRGiBV5x_jDC-LZZeSQy2ls5eb4eKAM2YnHUINAJxSn-9mTOl_m_pKzt7SXGNONy4-OXp44ahJvAUH__z27VGxGr0ybS3f6xo7y6mk8xVK6T9lGd5AjthL19LzvETHkHX7qexNo6M/w400-h226/1_33LlifxUZR38Y7TohLialA.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/04/webp.html'>سكريبت تحويل صور مدونتك إلى webp بلوجر مع التخزين المؤقت</a></div>
      <span class='category-article'>
      <a href='https://libraryscripts.blogspot.com/search/label/%D8%B3%D9%83%D8%B1%D9%8A%D8%A8%D8%AA%D8%A7%D8%AA'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>سكريبتات</a>
      </span>
      </div>
     </a>  
    </div>
  <div class='article'>
     <a href='https://libraryscripts.blogspot.com/2021/05/bsection.html'> 
      <img class='photo-article' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVCiFYz_WqiPN7uw9V88YTubmA-XDMnp4g3LjNuEQ662i4LSq-FeOA_Y_7Wsnxi5M9ZNVXhtO317hvsorwSBY4eeD0hxRxnU4WAmFJLwumojWQVonwJrX0nZ0Olnl-pZdQu-yjrrO0haU/w400-h189/Screenshot_4.png'/>
      <div class='meta-article'>
      <div class='title-article'><a href='https://libraryscripts.blogspot.com/2021/05/bsection.html'>إنشاء قسم الادوات (b:section) في بلوجر.</a></div>
      <span class='category-article'>
      <a href='https://libraryscripts.blogspot.com/search/label/%D8%A5%D8%B9%D8%AF%D8%A7%D8%AF%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1'>
      <svg aria-hidden='true' class='icon small-icon' data-icon='tags' data-prefix='fal' focusable='false' role='img' viewBox='0 0 640 512' xmlns='http://www.w3.org/2000/svg'><path d='M625.941 293.823L421.823 497.941c-18.746 18.746-49.138 18.745-67.882 0l-1.775-1.775 22.627-22.627 1.775 1.775c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L391.431 36.686A15.895 15.895 0 0 0 380.117 32h-19.549l-32-32h51.549a48 48 0 0 1 33.941 14.059L625.94 225.941c18.746 18.745 18.746 49.137.001 67.882zM252.118 32H48c-8.822 0-16 7.178-16 16v204.118c0 4.274 1.664 8.292 4.686 11.314l211.882 211.882c6.253 6.253 16.384 6.243 22.627 0l204.118-204.118c6.238-6.239 6.238-16.389 0-22.627L263.431 36.686A15.895 15.895 0 0 0 252.118 32m0-32a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882L293.823 497.941c-18.746 18.746-49.138 18.745-67.882 0L14.059 286.059A48 48 0 0 1 0 252.118V48C0 21.49 21.49 0 48 0h204.118zM144 124c-11.028 0-20 8.972-20 20s8.972 20 20 20 20-8.972 20-20-8.972-20-20-20m0-28c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.49-48 48-48z' fill='currentColor'/></svg>إعدادات بلوجر</a>
      </span>
      </div>
     </a>  
    </div>
</div>              
</b:if>