سلايد شو بلوجر احترافي و انيق 2019 - المحترف العربي
سلايد شو بلوجر احترافي لمختلف المدونات على منصة بلوجر – مرحبا الكثير منا يطمح لجدب انتباه زوار المدونة او الموقع الخاص به , و يبحث عن جميع اضافات المميزة ليحصل على مظهر انيق و جداب, هذه التدوينة حول تريكب سلايد slider لمدونات بلوجر سيجعل من مدونتك تبدو احترافية بعد خطوات بسيطة لتركيب هذا سلايد شو فقط تابع شرح ادناه خطوة خطوة و ستحضى بمظهر انيق و احترافي لمدونتك.

سلايد شو بلوجر احترافي و انيق 2019
سلايد شو بلوجر احترافي و انيق 2019
يقوم هذا السلايد شو بعرض احدث مواضيع بشكل متحرك و بصور مع العناوين تبدو مميز تثير الزائر لقراءة اكبر عدد ممكن من المواضيع الخاص بمدونتك كما ان له انطباع اجابي على تحسين المدونة الخاص بك. و نلاحض في اواني اخيرة اصبح جل المدونون يبحثون على افضل سلايد شو و يقومون بتركيبه حتا يحتفضو و يزيدوا من بزوار الموقع الخاص بهم وهذا يعود بطبيعة الحال المظهر من الجهة و محتوى المميز من جهة اخرى, لدالك ادا كنت لا تجد كتابة محتوى مميز قم بالعودة لدروس السابقة الخاص ب بلوجر حتى تتعرف على كيفية كتابة تدونة مميزية. و الان ننتقل الى طريق تركيب هذه الاضافة على المدونة بلوجر.

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

قم بالنقر على تحرير html للقالب.

ابحث عن </head> و اضف الكود التالي فوقه ( اعلاه ) .
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
ابحث عن <head> و اضف الكود التالي اسفله.
<style id='owl-carousel' type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto}
#featured-slider h2.title,#featured_slider .widget h2.title{display:none}
#featured_slider{margin:0 0 30px}
.slider-wrappper{max-width:970px;margin:0 auto;padding:0}
.owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
.slider-item{position:relative;height:100%}
.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
.post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s}
.slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.slider-wrapp .post-inner{padding:0 40px;margin:auto}
.slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slider-item h2.post-title a{color:#000;transition:all .3s}
.slider-item h2.post-title a:hover{color:#aaa}
.slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.slider-item .post-tag a:hover{background:#000;color:#fff}
.feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff}
.featured-posts{display:inline-block;width:100%}
.feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0}
.feature-item:last-child{margin:0}
.feature-item .thumb.overlay{height:150px;width:100%;position:static}
.feature-item .thumb.overlay a.slider-image{}
.feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s}
.feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden}
.feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)}
.feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400}
.feature-item h2.post-title a{color:#000}
.feature-item:hover h2.post-title a{color:#aaa}
.feature-item .post-meta{margin:0}
.feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.feature-item .post-tag a:hover{background:#000;color:#fff}
.feat-home{height:320px;margin:0 0 50px;position:relative}
.feat-home:before,.slider-item:before{content:&quot;&quot;;right:0}
.feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
.owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s}
.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
#HTML33 .widget-content{overflow:visible}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@media screen and (max-width: 768px){
.feature-item{width:50%;margin:0 auto 15px auto}}
@media screen and (max-width: 640px){
.owl-prev,.owl-next{top:18%}
.owl-carousel .owl-item{height:auto}
.post-descript{padding:15px 10px;left:5%;right:5%}
.slider-wrapp .post-inner{padding:0 10px}
.slider-item h2.post-title{font-size:16px}
.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
@media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
</style>
الان قم بحفض النمودج

ملاحضة : استبدل هذا الرابط https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ب  https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js في جالة ان وجدة الكود 1.7.1 
ادا لم تجد اي احد من هم قم باضافة الكود التالي فوق وسم </head>  :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
قم الان بحفض النمودج . حان الوقت الدي يجب تحديد مكان سلايد شو و دالك حسب اختيارك اما ان توضعه في اعلا او الاشفل هذا يعود لك ضعه بين 
ستجد داخل القالب كود يبدأ بوسم <div class='content-wrapper'> على الشكل التالي :
<div class='content-wrapper'>
...
...
---هنا ضع كود سلايد شو---
...
...
</div>
الان قم بنسخ كود السلايد شو التالي في اي مكان تريده بشرط ان يكون اسفل <div class='content-wrapper'> : 
<div class='slider-wrappper'>
<b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
  <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>Featured</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
          <!-- only display title if it's non-empty -->
                        <b:if cond='data:title != &quot;&quot;'>
                        <h2 class='title'>
                             <data:title/>
                          </h2>
                        </b:if>
                        <div class='widget-content'>
                          <div class='widget-inner'>
                            <script>
                              document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);
                            </script>
                          </div>
                        </div>
        </b:includable>
  </b:widget>
  <b:widget id='HTML33' locked='true' title='Featured Post' 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 != &quot;&quot;'>
                        <h2 class='title'>
                             <data:title/>
                          </h2>
                        </b:if>
                        <div class='widget-content'>
                          <div class='widget-inner'>
                            <script>
                              document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea5\&quot;&gt;&lt;\/script&gt;&quot;);
                            </script>
                          </div>
                        </div>
        </b:includable>
  </b:widget>
</b:section>
</div>
قم بتغير كلمة : هنا تصنيف بالتصنيف الدي تريد ان يضهر في سلاير و في الاخير قم بحفظ القالب و هنيئا لك ياصديقي, لا تنسى دعمنا بالتفاعل و ترك تعليقك لتشجيعنا على مزيد  من الدروس. شكرا

سلايد شو بلوجر احترافي و انيق 2019

سلايد شو بلوجر احترافي لمختلف المدونات على منصة بلوجر – مرحبا الكثير منا يطمح لجدب انتباه زوار المدونة او الموقع الخاص به , و يبحث عن جميع اضافات المميزة ليحصل على مظهر انيق و جداب, هذه التدوينة حول تريكب سلايد slider لمدونات بلوجر سيجعل من مدونتك تبدو احترافية بعد خطوات بسيطة لتركيب هذا سلايد شو فقط تابع شرح ادناه خطوة خطوة و ستحضى بمظهر انيق و احترافي لمدونتك.

سلايد شو بلوجر احترافي و انيق 2019
سلايد شو بلوجر احترافي و انيق 2019
يقوم هذا السلايد شو بعرض احدث مواضيع بشكل متحرك و بصور مع العناوين تبدو مميز تثير الزائر لقراءة اكبر عدد ممكن من المواضيع الخاص بمدونتك كما ان له انطباع اجابي على تحسين المدونة الخاص بك. و نلاحض في اواني اخيرة اصبح جل المدونون يبحثون على افضل سلايد شو و يقومون بتركيبه حتا يحتفضو و يزيدوا من بزوار الموقع الخاص بهم وهذا يعود بطبيعة الحال المظهر من الجهة و محتوى المميز من جهة اخرى, لدالك ادا كنت لا تجد كتابة محتوى مميز قم بالعودة لدروس السابقة الخاص ب بلوجر حتى تتعرف على كيفية كتابة تدونة مميزية. و الان ننتقل الى طريق تركيب هذه الاضافة على المدونة بلوجر.

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

قم بالنقر على تحرير html للقالب.

ابحث عن </head> و اضف الكود التالي فوقه ( اعلاه ) .
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
ابحث عن <head> و اضف الكود التالي اسفله.
<style id='owl-carousel' type='text/css'>
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.ct-wrapper{padding:0;position:relative;max-width:970px;width:auto;margin:20px auto}
#featured-slider h2.title,#featured_slider .widget h2.title{display:none}
#featured_slider{margin:0 0 30px}
.slider-wrappper{max-width:970px;margin:0 auto;padding:0}
.owl_carouselle.owl-carousel.owl-loaded{margin:0 0 3em}
.slider-item{position:relative;height:100%}
.slider-item:before{display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#2d3436;opacity:.4;z-index:1}
a.slider-image{height:100%}
.thumb.overlay{height:200px}
.post-descript{background:#fff;position:absolute;bottom:-30px;left:8%;right:8%;z-index:99;padding:25px;box-shadow:0 3px 10px rgba(0,0,0,0.1);border-radius:6px;text-align:center;transition:all .3s}
.slider-item:hover .post-descript{box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.slider-wrapp .post-inner{padding:0 40px;margin:auto}
.slider-item h2.post-title{font-size:24px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.slider-item h2.post-title a{color:#000;transition:all .3s}
.slider-item h2.post-title a:hover{color:#aaa}
.slider-item .post-date{display:inline-block;color:#aaa;font-size:10px;margin:10px auto 0 auto;text-transform:uppercase}
.slider-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:3px 10px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.slider-item .post-tag a:hover{background:#000;color:#fff}
.feat-home .post-tag a,.feat-home a,.feat-home div,.feat-home h2 a{color:#fff}
.featured-posts{display:inline-block;width:100%}
.feature-item{position:relative;display:inline-block;float:left;width:24.2%;margin:0 10px 0 0}
.feature-item:last-child{margin:0}
.feature-item .thumb.overlay{height:150px;width:100%;position:static}
.feature-item .thumb.overlay a.slider-image{}
.feature-item .post-descript{background:#fff;position:static;height:100px;margin:auto;border-radius:0;box-shadow:0 2px 10px rgba(0,0,0,0.1);padding:10px;overflow:hidden;transition:all .3s}
.feature-item .post-descript:before{content:&#39;&#39;;position:absolute;bottom:0;left:0;right:0;height:30px;background-image:linear-gradient(to top,#fff,rgba(255,255,255,0));background:linear-gradient(to left,#ffffff 0,#ffffff 100%,rgba(255,255,255,0) 100%);overflow:hidden}
.feature-item:hover .post-descript{box-shadow:0 1px 5px rgba(0,0,0,0.1)}
.feature-item h2.post-title{font-size:14px;margin:auto;line-height:normal;font-weight:400}
.feature-item h2.post-title a{color:#000}
.feature-item:hover h2.post-title a{color:#aaa}
.feature-item .post-meta{margin:0}
.feature-item .post-tag a{display:inline-block;background:#f39c12;color:#fff;padding:2px 8px;font-size:9px;text-transform:uppercase;letter-spacing:.5px;margin:0 auto 10px auto;border-radius:3px;transition:all .3s}
.feature-item .post-tag a:hover{background:#000;color:#fff}
.feat-home{height:320px;margin:0 0 50px;position:relative}
.feat-home:before,.slider-item:before{content:&quot;&quot;;right:0}
.feat-home:before{display:block;position:absolute;top:0;width:100%;height:100%;background:#000;opacity:.35;z-index:1}
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}
.owl-carousel{display:none;width:100%;z-index:1}
.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;-moz-backface-visibility:hidden}
.owl-carousel .owl-stage:after{content:&quot;.&quot;;display:block;clear:both;visibility:hidden;line-height:0;height:0}
.owl-carousel .owl-stage-outer{position:relative;-webkit-transform:translate3d(0,0,0)}
.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}
.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}
.owl-carousel .owl-item img{display:block;width:100%}
.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}
.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}
.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-loading{opacity:0;display:block}
.owl-carousel.owl-hidden{opacity:0}
.owl-carousel.owl-refresh .owl-item{visibility:hidden}
.owl-carousel.owl-drag .owl-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.owl-carousel.owl-grab{cursor:move;cursor:grab}
.owl-carousel.owl-rtl{direction:rtl}
.owl-carousel.owl-rtl .owl-item{float:right}
.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}
.owl-carousel .owl-animated-in{z-index:0}
.owl-carousel .owl-animated-out{z-index:1}
.owl-carousel .fadeOut{animation-name:fadeOut}
.owl-height{transition:height .5s ease-in-out}
.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}
.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}
.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}
.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(https://4.bp.blogspot.com/-9jaG9YO21Qs/W9rimdnu-mI/AAAAAAAACyQ/Tcv3-DtVm9kOlk73vTnBG6x_1a60wchuwCLcBGAs/s1600/play-icon.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}
.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}
.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}
.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}
.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
.owl-theme .owl-dots,.owl-theme .owl-nav{text-align:center;-webkit-tap-highlight-color:transparent}
.owl-theme .owl-nav{margin-top:10px}
.owl-theme .owl-nav [class*=owl-]{color:#FFF;font-size:14px;margin:5px;padding:4px 7px;background:#D6D6D6;display:inline-block;cursor:pointer;border-radius:3px}
.owl-theme .owl-nav [class*=owl-]:hover{background:#869791;color:#FFF;text-decoration:none}
.owl-theme .owl-nav .disabled{opacity:.5;cursor:default}
.owl-theme .owl-nav.disabled+.owl-dots{margin-top:10px}
.owl-theme .owl-dots .owl-dot{display:inline-block;zoom:1}
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:5px 7px;background:#D6D6D6;display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{background:#869791}
.owl-carousel .owl-item{height:420px;box-shadow:0 20px 10px -15px rgba(0,0,0,0.1)}
.owl-prev{left:20px;transform:translate(-50px,0)}.owl-next{right:20px;transform:translate(50px,0)}
.owl-prev,.owl-next{color:#fff;font-size:36px;height:65px;line-height:65px;padding:0 14px;position:absolute;top:42%;visibility:hidden;opacity:0;transition:all .3s}
.owl-nav button.owl-prev,.owl-nav button.owl-next{background:none;border:0}
.owl-carousel:hover .owl-prev,.owl-carousel:hover .owl-next{opacity:1;visibility:visible;transform:translate(0,0)}
#HTML33 .widget-content{overflow:visible}
@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
@media screen and (max-width: 768px){
.feature-item{width:50%;margin:0 auto 15px auto}}
@media screen and (max-width: 640px){
.owl-prev,.owl-next{top:18%}
.owl-carousel .owl-item{height:auto}
.post-descript{padding:15px 10px;left:5%;right:5%}
.slider-wrapp .post-inner{padding:0 10px}
.slider-item h2.post-title{font-size:16px}
.feature-item{display:inline-block;float:none;width:100%;margin:0 auto 15px auto}}
@media screen and (min-width:580px){.thumb.overlay{display:block;position:absolute;width:100%}.thumb.overlay{height:100%;top:0;left:0;bottom:0}}
</style>
الان قم بحفض النمودج

ملاحضة : استبدل هذا الرابط https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js ب  https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js في جالة ان وجدة الكود 1.7.1 
ادا لم تجد اي احد من هم قم باضافة الكود التالي فوق وسم </head>  :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
قم الان بحفض النمودج . حان الوقت الدي يجب تحديد مكان سلايد شو و دالك حسب اختيارك اما ان توضعه في اعلا او الاشفل هذا يعود لك ضعه بين 
ستجد داخل القالب كود يبدأ بوسم <div class='content-wrapper'> على الشكل التالي :
<div class='content-wrapper'>
...
...
---هنا ضع كود سلايد شو---
...
...
</div>
الان قم بنسخ كود السلايد شو التالي في اي مكان تريده بشرط ان يكون اسفل <div class='content-wrapper'> : 
<div class='slider-wrappper'>
<b:section class='featured-slider' id='featured-slider' maxwidgets='2' showaddelement='no'>
  <b:widget id='HTML32' locked='true' title='Slider' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>Featured</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
          <!-- only display title if it's non-empty -->
                        <b:if cond='data:title != &quot;&quot;'>
                        <h2 class='title'>
                             <data:title/>
                          </h2>
                        </b:if>
                        <div class='widget-content'>
                          <div class='widget-inner'>
                            <script>
                              document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum5+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea4\&quot;&gt;&lt;\/script&gt;&quot;);
                            </script>
                          </div>
                        </div>
        </b:includable>
  </b:widget>
  <b:widget id='HTML33' locked='true' title='Featured Post' 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 != &quot;&quot;'>
                        <h2 class='title'>
                             <data:title/>
                          </h2>
                        </b:if>
                        <div class='widget-content'>
                          <div class='widget-inner'>
                            <script>
                              document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+postnum4+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=postarea5\&quot;&gt;&lt;\/script&gt;&quot;);
                            </script>
                          </div>
                        </div>
        </b:includable>
  </b:widget>
</b:section>
</div>
قم بتغير كلمة : هنا تصنيف بالتصنيف الدي تريد ان يضهر في سلاير و في الاخير قم بحفظ القالب و هنيئا لك ياصديقي, لا تنسى دعمنا بالتفاعل و ترك تعليقك لتشجيعنا على مزيد  من الدروس. شكرا

اشتراك في القائمة البريدية