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

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

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

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

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

• اولا ابحث على  </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> وضع الكود هذا فوقه مباشرة

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

<div class='abdoutech-slider'><span class='loader' data-slider=''><span class='loader-inner' data-slider=''></span></span></div>


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

شارك الموضوع عبر :



free-blogger