اشكال سلايدر شواضافات بلوجر

سلايدر شو احترافي ( 1 ) لمدونات بلوجر مجانا

السلام عليكم ورحمة الله وبركاتة
اهلا بكم في موقع اكاديمية المصطفي لعلوم الكمبيوتر وخدمات الويب 

اليوم نقدم لكم سلايدر شو احترافي لمدونات بلوجر ( 1 )
شرح تركيب القالب
  1.  اولا نبحث عن </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>

  1. ثانيا نبحث عن هذا </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>
  1. الان ضع هذة الكود في اي مكان تريد ظهور به السلايدر شو
 


<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>




 

الان احفظ و إذهب الى التخطيط واضف التسميات التي تريد ضهور لها مواضيع
 
 
 

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.

زر الذهاب إلى الأعلى

أنت تستخدم إضافة Adblock

برجاء دعمنا عن طريق تعطيل إضافة Adblock