34513703109690600
recent
أخبار ساخنة

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

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

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

اهلا وسهلا بكم زوارنا الكرام نتحدث اليوم عن اضافة سلايد شو حسب التسمية لمدونات بلوجر بشكل احترافى فهناك بعض القوالب الممتازة جدا لا تحتوى علي سلايد شو للاسف ويصعب على بعض المستخدمين اضافة السلايد شو ولكن اليوم اصبح الموضوع سهلا ولا يحتاج الى خبرة في البرمجة
خطوات الشرح
  1. اولا نبحث عن الوسم </head>
  2. ثانيا وضع هذا الكود اسفلة 

  3. <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'/>


  4. ثم نسخ هذا الكود ووضعة في داخل التخطيط بحيث يظهر بالمكان الذي تريدة 

  5. <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>

  6. وفي الاخير سوف تظهر معك الاضافة بهذا الشكل
    سلايد شو حسب التسمية لمدونات بلوجر بشكل احترافى
    سلايد شو حسب التسمية لمدونات بلوجر بشكل احترافى 

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


ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

لاتنسي ان تترك بصمتك بالتعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة