اهلا وسهلا بكم زوارنا الكرام نتحدث اليوم عن اضافة سلايد شو حسب التسمية لمدونات بلوجر بشكل احترافى فهناك بعض القوالب الممتازة جدا لا تحتوى علي سلايد شو للاسف ويصعب على بعض المستخدمين اضافة السلايد شو ولكن اليوم اصبح الموضوع سهلا ولا يحتاج الى خبرة في البرمجة
خطوات الشرح
- اولا نبحث عن الوسم </head>
- ثانيا وضع هذا الكود اسفلة
- ثم نسخ هذا الكود ووضعة في داخل التخطيط بحيث يظهر بالمكان الذي تريدة
- وفي الاخير سوف تظهر معك الاضافة بهذا الشكل
<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'/>
<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>
