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

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

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. وفي الاخير سوف تظهر معك الاضافة بهذا الشكل

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

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