سلايد شو لمدونات بلوجر يعرض اكثر من قسم

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي

شرح اليوم على اضافة سلايد شو جديد الشكل ومختلف على المواضيع السابقة على اشكال سلايد شو

يمكنك معاينة من هنا

شرح طريقة التركيب

اولا ابحث في القالب على </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: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>

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

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع

HalaTeck
21 يونيو 2019 في 2:42 م

يسعدني ان اكون اول واحد يرد

اضافة رائعة جدا جدا
سلمت يداك

رد حذف
- عبدو تكنولوجي
  21 يونيو 2019 في 2:47 م
  
  <3
  
  رد حذف
برمجة وتصميم
21 يونيو 2019 في 3:27 م

اخي ابوس ايدك اريد سلايدر مواضيع ذات صلة

رد حذف
- عبدو تكنولوجي
  21 يونيو 2019 في 3:55 م
  
  سوف انشره
  
  رد حذف
علي عبد الجبار
22 يونيو 2019 في 1:08 م

السلام عليكم اخي عبدو اخي نريد منك إضافة تغيير شكل التدوينات إلى شكل احترافي

رد حذف
- عبدو تكنولوجي
  22 يونيو 2019 في 6:54 م
  
  لا يمكن شرح ذالك لانه يتطلب شخص يعرف التعامل مع اكواد css لانه كل قالب يختلف عن الاخر
  
  رد حذف
- برمجة وتصميم
  22 يونيو 2019 في 9:44 م
  
  نعم
  
  رد حذف

Forms

عبدو تكنولوجي

سلايد شو لمدونات بلوجر يعرض اكثر من قسم - سلايد شو رقم 13

قد تُعجبك هذه المشاركات

تعليقات