سلايد شو لمدونات الافلام و الانمي لبلوجر

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

و السلايدر التالي يتم استعماله في قوالب مارشميلو

معاينة السلايدر من هنا

لتركيب الاضافة اتبع الخطوات التالية

اولا ابحث على </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 
* =========================================*/
@keyframes loader{0%{transform:rotate(0deg)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes loader-inner{0%{height:0%}25%{height:0%}50%{height:100%}75%{height:100%}100%{height:0%}}
.loader{width:30px;height:30px;border:4px solid #fff;animation:loader 2s infinite ease;margin:95px auto;display:block}.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in}
.abdoutech-slider{background:linear-gradient(#fff,#fffe6);box-shadow:0 1px 55px #000000a1;direction:ltr;padding:20px;position:relative}
.abdoutech-slider .owl-item>li{height:360px;background:#191919;overflow:hidden;margin:0 6px;position:relative;direction:rtl;border:4px solid #fdfdfd;box-shadow:0 3px 15px #000000a8}
.abdoutech-slider .owl-item>li img{width:100%;height:auto;min-height:100%}
.abdoutech-slider .owl-item>li .titleSlider{position:absolute;bottom:0;right:0;width:100%;background:linear-gradient(#0000,#000000d9);text-align:center;padding:140px 5px 25px;color:#fff}
.loader[data-slider]{border:4px solid #ffffff}
.loader-inner[data-slider]{background-color:#ffffff}
a.sliderpin-next{position:absolute;top:42%;left:20px;margin-top:0;width:50px;height:60px;background:#fff;z-index:10;font-size:56px;text-align:center;border-radius:5px;color:#171717;box-shadow:0 2px 15px #000000a3;line-height:60px;font-size:32px}
a.sliderpin-prev{position:absolute;top:42%;right:20px;margin-top:0;width:50px;height:60px;background:#fff;z-index:10;font-size:56px;text-align:center;border-radius:5px;color:#171717;box-shadow:0 2px 15px #000000a3;line-height:60px;font-size:32px}
.year-post-date{position:absolute;top:4px;left:3%;font-size:12px;background:#fff;color:#171717;padding:4px 5px}
.abdoutech-slider .label-circular{top:0;right:9px}
.year-post-date:after{content:"\f273";display:inline-block;font-family:'FontAwesome';float:right;vertical-align:middle;margin-left:5px}
.abdoutech-slider:after{content:"";background:repeating-linear-gradient(135deg,rgba(0,0,0,.3),rgba(0,0,0,.3) 4px,transparent 4px,transparent 6px,rgba(0,0,0,.3) 6px);position:absolute;top:0;left:0;width:100%;height:100%;z-index:-112;opacity:.4}
.label-circular{display:block;margin:8px 0;position:absolute;z-index:2}
.label-circular span{color:#333!important}
.label_name{position:relative;display:inline-block}
.label_name i{display:inline-block;line-height:34px;height:34px;width:34px;color:#fff;text-align:center;vertical-align:middle;border-radius:50%;text-shadow:1px 1px 1px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.label_name span{left:50%;bottom:-36px;padding:3px 9px;font-size:12px;background:#fff;box-shadow:0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);border-radius:50px;position:absolute;color:#566b78;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px);opacity:0;visibility:hidden;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform;-webkit-transition-duration:.25s;transition-duration:.25s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.label_name:hover span{opacity:1;visibility:visible}
.label_name i{background-color:#fff;color:#171717}
/*]]>*/
</style>
</b:if>

الان ابحث على </body> وضع الكود هذا فوقه مباشرة

الان و في الخطوة الاخيرة ضع الكود التالي في المكان الذي تريده انت في القالب يمكنك وضعه في التخطيط او من القالب كما تريد

maher 20 يناير 2019 في 2:23 ص

شكرا لك دائما تزودنا باضافات مميزة و رائعة

و لكن هل هو ثابت لا يتحرك بشكل تلقائي
- عبدو تكنولوجي - Abdou Technologie 20 يناير 2019 في 4:19 ص
  
  نعم لاكن يمكن تحريكه ب الازرار