في هذا المقال سنعرض لكم سكريبت سلايد شو بسيط وسهل الإستخدام مع إضافات اخرى مرفقة معه متوافقة مع جميع الاجهزة و به خاصية التمرير باليد عكس باقي السكريبتات التي لاتدعمها للأسف.
بنسبة لمعاينة السكريبت ستجده في اسفل المقالة.
+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 حسنا في الفيديو اسفله ربما ساعطيك تلميحا ,لاتنسى إلقاء نضرة في الصورة اسفله للدخول بمحرر المواقع في المتصفحات.
VIDEO
<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>
للمزيد من امثلة لستعمال هذا السكريبت زر الموقع الخاص به هنا
المعاينة
