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

Admin Amer

يونيو 10, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

شرح التركيب

1. تبحث على 
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. الان الكود التالي تحمله من هنا  وتضعه في المكان الذي تريد ظهور فيه السلايدر شو

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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

http://ab-expert.blogspot.com/2018/06/blog-post_88.html

HTML Code Of Post:

<a href="http://ab-expert.blogspot.com/2018/06/blog-post_88.html">سلايد شو حسب التسمية لمدونات بلوجر | الشكل السادس كتبها: المدون التقني - الخبير عامر بشير</a>