U3F1ZWV6ZTQ5ODI5NjAyMzU3X0FjdGl2YXRpb241NjQ1MDA2NDM0MzI=
recent
أخبار ساخنة

سلايدر شو احترافي ( 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>






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





ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة