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

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

معاينة سلايدر من هنا

شرح التركيب

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/abdelalilebbihi/abdou_tech/master/OwlCarousel.js' type='text/javascript'/><script async='async' src='//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/slider_v6.js' type='text/javascript'/>

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

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

شارك هذا