السلام عليكم ورحمة الله وبركاته
سلايد شو لمدونات بلوجر يعرض اكثر من قسم
أهلا وسهلا بكم متابعي مدونة اسمعنى اون لاين اليوم سوف نشرح لكم سلايدر شو لمدونات بلوجر يعرض لكم أكثر من قسم على المدونة .
شرح التركيب
اولا ابحث في القالب على </head> وضع الكود التالي فوقه مباشرة
<b:if cond='data:view.isHomepage'>
<link defer='defer' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<style type="text/css">
/*<![CDATA[*/
/*=====================================
= slider
=====================================*/
.sliders{display:none}
.slider-card{direction:ltr;height:503px;position:relative;overflow:hidden;padding-top:25px;background:-webkit-linear-gradient(#2c2d2c,#131514);background:linear-gradient(#2c2d2c,#131514)}
.backImage{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:center;filter:blur(0)}
.slider-card .QualitySpan{text-align:center;color:#323232;position:absolute;right:10px;top:10px;background:#fff;font-size:14px;padding:4px 8px;border-radius:4px;font-weight:700;border:0;font-family:font,neo;box-shadow:0 0 5px rgba(0,0,0,.5490196078431373)}
.slider-card>span.nextslider-card{-webkit-transform:translate(-80px,0);transform:translate(-80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;height:60px;border-radius:15px;top:50%;left:20px;background:#262626;margin-top:-30px;z-index:10;box-shadow:0 1px 16px rgba(0,0,0,.47);line-height:54px;text-align:center;color:#fafafa;cursor:pointer;padding-top:5px;font-size:35px;padding-right:8px}
.slider-card>span.prevslider-card{-webkit-transform:translate(80px,0);transform:translate(80px,0);position:absolute;-webkit-transition:.3s all ease;transition:.3s all ease;width:60px;border-radius:15px;height:60px;top:50%;right:20px;box-shadow:0 1px 16px rgba(0,0,0,.47);background:#262626;margin-top:-30px;z-index:10;padding-top:5px;line-height:53px;cursor:pointer;text-align:center;color:white;font-size:31px;padding-right:0;padding-left:2px}
.slider-card:hover>span{-webkit-transform:translate(0);transform:translate(0)}
.slider-card li .container{height:500px;position:relative;width:1200px;margin:0 auto}
.bottomBarDetails>.social-shares{float:right;color:#ddd;font-weight:700;font-size:12px;left:initial;margin-left:8px;position:static;border-top:0;padding-top:0;margin-top:0}
.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}
.slider-card .owl-item{overflow:hidden}
.owl-item .imdbSpan{-webkit-transition:.3s all ease;transition:.3s all ease;position:absolute;top:42px;left:10px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.43);background:#efaf22;z-index:100;font-weight:700;font-size:17px;color:#2f2f2f;padding:5px 10px 6px;font-family:neo}
.slider-card li{list-style:none;padding-top:10px;height:590px;position:relative;z-index:1;-webkit-transition:.1s all linear;transition:.1s all linear;background-repeat:no-repeat;background-size:100%;background-position:0% 25%}
.slider-card li a:nth-child(5){display:none}
.slider-card li:before{content:'';position:absolute;top:-10%;left:-10%;z-index:-2;width:120%;opacity:.3;-webkit-filter:blur(3px);height:120%;background-size:100%;background-position:center}
.coverSlider{height:100%;overflow:hidden;background-position:top center;background-size:cover;position:relative;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)}
.slider-card li a .coverSlider:after{content:'';position:absolute;top:0;right:0;width:100%;height:100%;background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));-webkit-transition:.4s .1s all ease;transition:.4s .1s all ease;opacity:0;-webkit-transform:translate(0,150px);transform:translate(0,150px)}
.titleSmalled{position:absolute;bottom:0;right:0;width:100%;font-size:19px;-webkit-transform:translate(0,0%);transform:translate(0,0%);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.84));background:linear-gradient(transparent,rgba(0,0,0,.84));font-weight:700;padding:30px 15px 10px;color:white;-webkit-transition:.3s all ease;transition:.3s all cubic-bezier(.56,.28,.34,1.34)}
.slider-card li a:hover .titleSmalled{-webkit-transform:translateY(-29px);transform:translateY(-29px)}
.YearSpan{position:absolute;top:10px;left:10px;background:rgba(33,33,33,.88);border-radius:4px;padding:3px 6px 2px;font-weight:700;color:white;z-index:10;font-family:neo;font-size:13px}
.YearSpan i{margin-left:3px}
.posterSlider{width:90px;height:110px;border:3px solid #f3f3f3;box-shadow:0 1px 3px rgba(0,0,0,.37);position:absolute;top:195px;right:12px;-webkit-transform:translate(110px,0);transform:translate(110px,0)}
.slider-card li a:hover .posterSlider{-webkit-transform:translate(0,0);transform:translate(0,0);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)}
.slider-card li a img{width:100%;height:100%}
.detailsDesc{height:113px;background:-webkit-linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));background:linear-gradient(rgb(0,0,0),rgba(0,0,0,.54));border-top:2px solid rgb(2,2,2);padding:15px 23px;font-size:15px;font-weight:700;color:#efefef}
.bottomBarDetails{position:absolute;top:9px;right:9px}
.bottomBarDetails>div>div{background:rgba(255,255,255,.7607843137254902);margin-bottom:4px;padding:4px 8px;border-radius:7px;font-size:13px;color:#000;font-weight:700;-webkit-transition:.4s all ease;-moz-transition:.4s all ease;-o-transition:.4s all ease;transition:.4s all ease;-webkit-transform:scale(0);transform:scale(0)}
.bottomBarDetails>div>div:nth-child(1){transition-delay:.1s}
.bottomBarDetails>div>div:nth-child(2){transition-delay:.2s}
.bottomBarDetails>div>div:nth-child(3){transition-delay:.3s}
.bottomBarDetails>div>div:nth-child(4){transition-delay:.4s}
a.box:hover .bottomBarDetails>div>div{transform:scale(1)}
.bottomBarDetails>div>div i{margin-left:4px}
.slider-card li a{right:0;box-shadow:0 1px 6px rgba(0,0,0,.54);height:433px;overflow:hidden;text-align:right;direction:rtl;display:inline-block;position:relative;width:24.1%;width:calc(25% - 10px);float:right;margin-right:5px;margin-left:5px;border:3px solid #fff}
.slider-card li a:hover .coverSlider{height:316px}
.slider-card li a:hover .titleHovered{-webkit-transform:translateY(-120px);transform:translateY(-120px);-webkit-transition:.4s .2s all ease;transition:.4s .2s all cubic-bezier(.56,.28,.34,1.34)}
.slider-card li a:hover .coverSlider:after{opacity:1;-webkit-transform:translate(0);transform:translate(0)}
.slider-card li a:hover .bottomBarDetails{-webkit-transform:scale(1);transform:scale(1)}
@media (max-width:1199px){.slider-card{height:initial;padding-bottom:10px}.slider-card li .container{width:100%;height:initial}.slider-card li{height:initial}.slider-card li a{width:24%;width:calc(25% - 10px);height:293px}.posterSlider{display:none}.titleSmalled{font-size:15px}.slider-card li a:hover .titleSmalled{-webkit-transform:translateY(0);transform:translateY(0)}}
@media (max-width:767px){.slider-card li a{width:48%;width:calc(50% - 10px);margin-bottom:10px}}
@media (max-width:399px){.slider-card li a{height:200px}}
/*]]>*/
</style>
</b:if>
ثانيا ابحث في القالب على </body> وضع هذا الكود فوقه
<b:if cond='data:view.isHomepage'>
<script src='https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/OwlCarousel.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
!function(){var e=document.createElement("script")
e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/abdelalilebbihi/abdou_tech/gadget/slider13.js"
var t=document.getElementsByTagName("script")[0]
t.parentNode.insertBefore(e,t)}();
//]]>
</script>
</b:if>
الان مع الكود الأخير ويمكنك وضعه في اى مكان تريده
<b:section class='sliders' id='slider' cond='data:view.isHomepage'>
<b:widget id='TextList2' locked='false' title='اقسام الموقع' type='TextList' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='shownum'/>
<b:widget-setting name='item-6'>حيوانات</b:widget-setting>
<b:widget-setting name='item-5'>قهوة</b:widget-setting>
<b:widget-setting name='item-4'>رسوم</b:widget-setting>
<b:widget-setting name='item-3'>عقل</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='item-2'>ألوان</b:widget-setting>
<b:widget-setting name='item-1'>ابداع</b:widget-setting>
<b:widget-setting name='item-0'>فنون</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='content'/>
</b:includable>
<b:includable id='content'>
<div class='slider-card'>
<div class='backImage' style='background-image: url()'/>
<span class='nextslider-card'><i class='fa fa-chevron-left'/></span>
<span class='prevslider-card'><i class='fa fa-chevron-right'/></span>
<b:tag class='slides owl-carousel owl-theme wow' data-wow-duration='1s' name='div'>
<b:loop values='data:items' var='item2'>
<b:tag expr:data-qism='data:item2' id='slide-1Cover' name='li'/>
</b:loop>
</b:tag>
</div>
</b:includable>
</b:widget>
</b:section>