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

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

خطوات الشرح

1. اولا نبحث عن الوسم </head>
2. ثانيا وضع هذا الكود اسفلة 



<style>
/*<![CDATA[*/
.box-slider{position:relative;overflow:hidden}.box-slider .thumb-slider{height:450px;overflow:hidden}.box-slider .thumb-slider img{height:100%}.box-slider .thumb-slider:before{position:absolute;content:'';z-index:9;width:100%;height:100%;background:-webkit-gradient(linear,left top,left bottom,color-stop(30%,rgba(18,22,31,0)),color-stop(90%,rgba(25,29,40,1)));background:linear-gradient(180deg,rgba(18,22,31,0) 30%,rgba(25,29,40,1) 90%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#12161F',endColorstr='#12161F',GradientType=0)}.box-slider .info-slider{position:absolute;top:20px;left:15px;z-index:999}.box-slider .info-slider>span{display:inline-block;margin:5px;padding:0 8px;border-radius:4px}.box-slider .info-slider span.number{border:2px solid #fff;background:rgba(0,0,0,.4);color:#fff;height:41px;line-height:37px}.box-slider .info-slider span.number span{font-weight:lighter;font-family:sans-serif}.box-slider .info-slider span.qult{height:40px;line-height:37px;padding:0 15px;font-size:21px;font-weight:lighter;font-family:sans-serif;color:#fff}.box-slider h3{position:absolute;bottom:5px;width:100%;padding:10px;text-align:center;margin:0;z-index:99;font-weight:600;font-size:19px}.box-slider h3 a{color:#fff}.box-slider .thumb-slider .ico-video{position:absolute;z-index:999;top:-50%;left:-50%;width:80px;height:80px;background:url(https://c.top4top.net/p_826jftrl1.png) no-repeat center center;margin-left:-40px;margin-top:-40px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out}.box-slider:hover .thumb-slider .ico-video{top:50%;left:50%;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out}.title-box-drak{color:#fff;font-size:22px;margin-top:5px}.nomargbot{margin-bottom:0 !important}.player-text-title{color:#fff;display:inline-block;font-weight:600;font-size:18px;padding:10px 0;float:right}div#slider-top .item img{-webkit-transition:all .4s ease-in;-moz-transition:all .4s ease-in;-ms-transition:all .4s ease-in;-o-transition:all .4s ease-in;transition:all .4s ease-in}.owl-nav div{font-size:34px;position:absolute;top:50%;width:45px;height:45px;text-align:center;line-height:52px;background:rgba(255,255,255,.19);padding:0;margin-top:-22px}.owl-nav div.owl-next{left:0}.owl-nav div.owl-prev{right:0}.owl-nav div:hover{background:#fff}
/*]]>*/
</style>
<link href='//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css' rel='stylesheet'/>
<script async='async' src='//rawgit.com/pagooo/Abdalla_Ragab/master/OwlCarousel.js' type='text/javascript'/>
<script async='async' src='//rawgit.com/pagooo/Abdalla_Ragab/master/gadget/slider_v6.js' type='text/javascript'/>




3. ثم نسخ هذا الكود ووضعة في داخل التخطيط بحيث يظهر بالمكان الذي تريدة 








<b:section class='slider-top' id='slider-top'>
  <b:widget id='HTML282' locked='false' title='' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>تقنية</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != ""'>
<!--<h3>
<data:title/>
</h3>-->
</b:if>
<div class='widget-content'>
<script type='text/javascript'>
   document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=updated&alt=json-in-script&callback=slideabdoutech\"><\/script>");
</script>
  </div>
</b:includable>
  </b:widget>
</b:section>



4. وفي الاخير سوف تظهر معك الاضافة بهذا الشكل
   

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