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

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

السلايدر انيق جدا وسلس وطريقة تركيبه سهلة ايضا

اولا يمكنك معاينته من خلال الزر التالي

معاينة

1. إبحث على </head> وضع هذا الكود فوقه مباشرة

<b:if cond='data:blog.url == data:blog.homepageUrl'><style>.box-tag a{padding:2px 8px;background-color:#3cbd1b;color:#fff!important;font-size:11px;z-index:999;font-weight:400;margin-bottom:5px;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.2)}.recent-slider .carousel{position:relative;margin:30px 0 25px!important;padding:0;overflow:visible;height:auto;display:block;clear:both}.recent-slider .carousel h2{display:none}.main-carousel{overflow:hidden}.carousel-abdoutech{padding:0!important;position:relative;overflow:hidden;list-style:none}.carousel-thumb{width:100%;height:380px;position:relative;display:block}.carousel-abdoutech .box-image{width:100%;height:100%;position:relative;display:block}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Yv8wJSpNsKD9D1dNBIxCIlGDDXe9HqalERhesIdxRHvkUnErx1zpwd0niLQ2TuYPVABtJHol1AsJ5N_oWPirMv28Mjd-DEAgMgmsEj4lXLm_aDXxI8MHEmPGpEoDK965nYw1lbBz1Rx/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-content,.featured .post-panel{transition:all .35s;box-sizing:border-box}.boxes ul li:hover .box-image:after,.bx-first:hover .bf-thumb:after,.carousel-abdoutech:hover .box-image:after{opacity:.2}.carousel-content{position:absolute;bottom:0;background:rgba(0,0,0,.31);width:100%;z-index:2;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;padding:15px;text-align:right}.main-carousel .owl-dots,.owl-carousel .owl-item:hover .carousel-content{bottom:10px}.carousel-abdoutech .recent-title{margin:10px 0 3px;font-size:18px;font-weight:600}.carousel-abdoutech .recent-title a{color:#fff;display:inline-block;line-height:1.2em;text-shadow:0 .5px .5px rgba(34,34,34,.3)}.carousel-abdoutech .recent-date{color:#ccc}.carousel-tag a{padding:2px 8px;background-color:red;color:#fff!important;font-size:11px;z-index:999;font-weight:400;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.3)}.main-carousel .owl-next,.main-carousel .owl-prev{margin-top:0;font-size:25px;line-height:40px;position:absolute;top:170px;width:47px;height:47px;cursor:pointer;z-index:999}.main-carousel .owl-prev{right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZd4mOtQVJivsfG9AJYFxISpoSnlUEX-1QNot2Vr31jv8-ndqzn8kgjxOStN62svKjVmT5WcC0qN0uYth6pQBjYxHlqy4RwY3wKIANiZ88WXe54IwN0lDapLhnFqL9NV1XHV1xQygU3b5/s1600/next.png) 100% 0 no-repeat}.main-carousel:hover .owl-prev{right:0}.main-carousel .owl-next{left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZZd4mOtQVJivsfG9AJYFxISpoSnlUEX-1QNot2Vr31jv8-ndqzn8kgjxOStN62svKjVmT5WcC0qN0uYth6pQBjYxHlqy4RwY3wKIANiZ88WXe54IwN0lDapLhnFqL9NV1XHV1xQygU3b5/s1600/next.png) no-repeat}.main-carousel:hover .owl-next{left:-1px}.recent-date{color:#bdbdbd;font-size:12px;font-weight:400}.featured-date:before,.recent-date:before{content:'\f017';font-family:fontawesome;margin-left:5px}.owl-carousel .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0{opacity:1}100%{opacity:0}}@keyframes fadeOut{0{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out}.owl-carousel{display:none;width:100%;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:right;-webkit-backface-visibility:visible;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-dots,.owl-next,.owl-prev{position:absolute;text-align:center}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:left}.no-js .owl-carousel{display:block}.owl-next,.owl-prev{top:0;color:#1c1c1c;background-color:rgba(255,255,255,.8);font-family:FontAwesome;z-index:1;display:block;cursor:pointer;padding:0;overflow:hidden}.owl-prev{right:0}.owl-next{left:0}.owl-dots{bottom:1px;width:33.33%;right:0;left:0;margin:auto}.star_rating{position:absolute;top:0;left:0;z-index:2;font-size:14px;padding:5px 10px;background:rgba(35,40,45,.6)}li.carousel-abdoutech .star_rating .fa:nth-child(1){color:red}li.carousel-abdoutech .star_rating .fa:nth-child(2){color:#f50}li.carousel-abdoutech .star_rating .fa:nth-child(3){color:#fa0}li.carousel-abdoutech .star_rating .fa:nth-child(4){color:#3cbd1b}li.carousel-abdoutech .star_rating .fa:nth-child(5){color:#127adb}.carousel-abdoutech .box-image:after{display:block;position:absolute;bottom:0;width:100%;height:100%;z-index:1;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Yv8wJSpNsKD9D1dNBIxCIlGDDXe9HqalERhesIdxRHvkUnErx1zpwd0niLQ2TuYPVABtJHol1AsJ5N_oWPirMv28Mjd-DEAgMgmsEj4lXLm_aDXxI8MHEmPGpEoDK965nYw1lbBz1Rx/s1600/pattern.png) top right rgba(58,78,90,.4)}.carousel-abdoutech .box-image:after{content:'';opacity:.8;transition:all .35s;right:0;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s}.carousel-abdoutech:hover .box-image:after{opacity:.2} </style><link href='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/><script data-cfasync='false' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'/></b:if>

1. الان في الخطوة الثانية إبحث على </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'><script type='text/javascript'>//<![CDATA[ /*اعدادات السلايدر*/ var MONTH_FORMAT=[,"كانون الثاني","فبراير","مارس","أبريل","ماي","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"]; // هنا تغيير اسم الاشهر لو مدونتك اجنبية var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J3UZcYFgKrGGqQ1lzXWqlwa98Q_QC1LZ3Rr5_7SWI9ePtn7BjI4dVOAQFJpQ2VDd3_f_o_5iZhxvlnlM7vrTlkDEHHSvCZCS40ePYrZgRlSPPq5I71o_BM7BXD3qM75Xv5_qOktU_oI/s1600-r/nth.png"; // هنا صورة البديلة var CAROUSEL_NUM = 6; // هنا تتحكم بعدد المواضيع var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'https://rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_star1.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript); //]]></script></b:if>

1. و اخيرا ضع هذا الكود في المكان الذي تريد انت ضهور فيه السلايدر

<b:if cond='data:blog.url == data:blog.homepageUrl'><div class='recent-slider' id='recent-slider'><div class='container'><b:section class='box-sec' id='box-sec' showaddelement='yes'> <b:widget id='HTML655' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span id="carousel" data-label="سينما"></span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2></b:if> <div class='widget-content'> <data:content/> </div><!--b:include name='quickedit'/--></b:includable> </b:widget></b:section></div></div></b:if>

1. الان اذا اردت تغيير التسمية ما عليك سوى تغيير كلمة سينما بتسمية من تسمياتك

اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد من هنا

شارك هذا