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