سلايد شو احترافي جديد ومميز 2019

سلايد شو احترافى لعرض المواضيع تلقائيا لمدونات بلوجر

سنشرح لكم اليوم طريقة اضافة سلايد شو احترافى لعرض المواضيع سلايد شو يعمل تلقائيا سلايد شو متجاوب مع جميع الاجهزة انيق لا اطيل عليكم هى بنا نشرح طريقة اضافة سلايد شو احترافى لعرض المواضيع تلقائيا لمدونات بلوجر.

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/AVvXsEigHl4JmiMd_nXxPKCD7GcGGok_DaZHan4UgKcZ3K7QTdU9mQx9fy5Bq1AFJB6QO22InL10cDIJSiufpjD7VdJGogero8pwXk7StIwleBhFEvI_ZOnCloCQ11-RF0KUHJCaT21yLJpGHtKX/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/AVvXsEhEGWo_vb0_pZxg2JeE5vdWG94t6cyd8mAyXP0aeCffvkbdbeTdio3HA-F6mdBIw190n1ICZj80Hc32QH08LfBnaNvYRbte9_EjY3P8V_nAsYULlXCCLjfTphyphenhyphendX16PQa4wXxwB1uMyxJel/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/AVvXsEhEGWo_vb0_pZxg2JeE5vdWG94t6cyd8mAyXP0aeCffvkbdbeTdio3HA-F6mdBIw190n1ICZj80Hc32QH08LfBnaNvYRbte9_EjY3P8V_nAsYULlXCCLjfTphyphenhyphendX16PQa4wXxwB1uMyxJel/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/AVvXsEigHl4JmiMd_nXxPKCD7GcGGok_DaZHan4UgKcZ3K7QTdU9mQx9fy5Bq1AFJB6QO22InL10cDIJSiufpjD7VdJGogero8pwXk7StIwleBhFEvI_ZOnCloCQ11-RF0KUHJCaT21yLJpGHtKX/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>

2.الان في الخطوة الثانية إبحث على </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/AVvXsEiZf4mwYNDA5Yn2fYpVDKXSyBRH_D4NbPVVwGR2kg1VNku7g-rlmcvgvk-1xl3EH8QKH-gCQXsONwqc7Lh2T-yijdilc4UlCxkDh-GEnsAmPM3Y5O0Sn-p63P-6KtvWodCcj45tZQVv34w/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>

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

<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>

واخيرا بمكنكم تغير القسم المراد عرضه باستبدال القسم الموجودفي الكود "سينما"