اضافة سلايد شو متجاوب تلقائي لعرض المواضيع حسب التسميات لمدونة بلوجر

سلايدر تلقائي لعرض المواضيع حسب التسميات مدونة بلوجر

سلايد شو slide show يقوم بعرض مواضيع المدونة حسب التسميات لمدونة بلوجر الاصدار الثاني.
كنا قد قدمنا لكم مجموعة من اضافات السلايد شو من بينها سلايد شو يعرض المواضيع حسب التسميات، وفي هذه التدوينة سنقدم لكم سلايد شو أخر يقوم بعرض المواضيع حسب التسميات.

سلايدر تلقائي لعرض المواضيع حسب التسميات مدونة بلوجر

كيفية تركيب سلايد شو للمدونة:

- 
- قم بدخول الى مدونتك ثم المظهر بعدها تحرير html و ابحث عن.

</b:skin>

بعد عثورك عليه ضع فوقه الكود التالي.

    .recent-slider{text-shadow:0 1px 0 rgba(0,0,0,0.15);padding-left:5px;padding-right:1px;margin:0 auto;width:auto;}

    .nivoSlider,.top-l-slider .nivoSlider{width:100%;text-align:Center;overflow:hidden}

    .nivo-box,.nivoSlider{overflow:hidden}

    .nivoSlider{position:relative;height:300px}

    .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:300px!important}

    .top-l-slider .nivoSlider{position:relative;height:400px}

    .top-l-slider .nivoSlider img{position:absolute;top:0;left:0;max-width:none;height:400px!important}

    .nivo-main-image{display:block!important;position:relative!important;width:100%!important}

    .nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;background:#fff;filter:alpha(opacity=0);opacity:0}

    .nivo-box,.nivo-slice{z-index:5;position:absolute}

    .nivo-box,.nivo-box img,.nivo-caption,.nivo-slice{display:block}

    .nivo-slice{height:100%;top:0}.nivo-caption{position:absolute;bottom:10px;left:5%;width:90%;text-align:center;font:400 26px tahoma,sans-serif;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:#fff}

    .nivo-caption p{text-align:Center;font:400 13px tahoma,sans-serif;margin:10px 20px;padding:10px;display:inline-block;border-radius:1px;background:rgba(34, 34, 34, 0.83);line-height:21px}.nivo-caption a{color:#ecf0f1}.nivo-caption h3{text-align:center;padding:5px;display:inline-block;border-radius:1px;margin:0;line-height:37px!important;background:#47cf73 ;font:400 20px tahoma,sans-serif}

    .nivo-caption .sliderdata{margin:10px;text-align:Center;color:#fff}

    .nivo-html-caption{display:none}.nivo-directionNav a{position:absolute;top:50%;margin-top:-15px;z-index:9;font-size:0;display:block;width:30px;height:30px;border-radius:1px;line-height:30px!important;background-color:rgba(255, 255, 255, 0.28);cursor:pointer;box-shadow:1px 1px 1px rgba(0,0,0,.4);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.4)}

    .nivo-prevNav{left:10px}

    .nivo-nextNav:before,.nivo-prevNav:before{position:Absolute;left:0;top:0;color:#fff;height:30px;width:30px;text-align:center;z-index:100;display:block}.nivo-prevNav:before{content:'\2190';font:400 20px sans-serif;line-height:30px!important}

    .nivo-nextNav:before{content:'\2192';font:400 20px sans-serif;line-height:30px!important}.nivo-nextNav{right:10px}.nivo-controlNav{text-align: center; z-index: 9; position: relative; bottom: 290px; font-size: 0;}.nivo-controlNav a{cursor: pointer; display: block; width: 10px; height: 10px; background: #FFF; float: right; border-radius: 10px; margin-right: 5px;}.nivo-controlNav a.active{background:#47cf73}

- اعد البحث عن.

</body>

بعد ايجاده ضع فوقه الكود التالي.

    <script src='//rawgit.com/mo3awin/slideshow5/master/slide5.js' type='text/javascript'/>

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    <script type='text/javascript'>

    //<![CDATA[

    $(function(){$(".recent-slider").each(function(){$(this).append('<div id="slider"></div>');var t="http://alawirisaddam.blogspot.com/feeds/posts/summary/-/"+$(this).attr("data-label")+"?max-results=6&alt=json-in-script",l=$(this);$.ajax({type:"GET",url:t,async:!0,contentType:"application/json",dataType:"jsonp",success:function(t){for(var e=0;e<t.feed.entry.length;e++){for(var a=t.feed.entry[e],r=0;r<a.link.length;r++)if("alternate"==a.link[r].rel){var i=a.link[r].href;break}try{var s=a.media$thumbnail.url.replace("s72-c","h300-w1200-no")}catch(t){s="https://lh3.googleusercontent.com/24RAodFW8xxgzHpVBAthJHsf_szjRoa3-KzlAEdFgB6X6A5Gmlm-nCvt5nRkE95T52PmHSE4Mf5wvNGoRUgIXjjHi4PjiucY3RimpoVdiTPKQN5Jdj2n9-9bW0wUSzQcirYstqGO8Unv5v7RMU5JD_Q-lEuBgtUfXEmHxOs6ENvJBanzORTRCVXwSzYNRJxijualu8mHhR5S6DG8l4CIo6uADoudrzXGsz7oszRXccZK_FbasxG5xJ9O0mtPuIVavRO8Or89er61NiJIctiUWV0YqtMMOqK214VSjs8-lAx_7LmkneNOrkP7NdXvGTK0fxHgRBiHL7Tm2weLM33LjyMEzY4ygL68Hx81iJK4D-YRmUa8NJhpEKs8q93jgjwJ3ZrgDSzn2pKI-y3c5VWrYf-H38_lWOIMf7uuTOzKUOqoQYZLN8bhFYVyB4bLUwfX0gDtTT38QsV6MILDBQZl6gHQrHt1C8Lpp9EZ0x-1Vl2r2HeKlXS60iuRKZdfSWZNbibE2y9GCfdbBzRUGa-G3GRkQstDu2UBtNOo6WHZ4GI=w600-h250-no"}var n='<a href="'+i+'"><img src="'+s+'" title="<a href=\''+i+"'><h3>"+a.title.$t+"</h3></a><p>"+a.summary.$t.substr(0,180)+'</p>"/></a>';l.find("#slider").append(n)}$("#slider").nivoSlider({effect:"random",pauseTime:5e3})}})})});

    //]]>

    </script>

    </b:if>

قم بتغيير رابط مدونتي http://alawirisaddam.blogspot.com برابط مدونتك.
- نأتي الان مع الكود المسؤول عن اظهار السلايدر، ويمكنك وضعه في تخطيط المدونة.

    <div class="recent-slider" data-label="بلوجر"></div>

قم بتغيير الكلمة بلوجر الى التسمية التي تريدها، بعدها قم بحفظ وشاهد النتيجة.

سلايد شو يقوم بعرض المواضيع حسب التسميات

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

تركيب سلايد شو الذي يعرض المواضيع حسب التسميات:

* اولا اتجه الى لوحة تحكم مدونتك.

* بعدها الى المظهر (القالب).

* ثم اضغط على سهم جنب كلمة تخصيص.

* بعدها اختر تحرير html.

* الان اضغط داخل صندوق اكواد وقم بضغط على Ctrl + F من لوحة مفاتيح كمبيوتر.

* سيظهر لك مربع بحث قم بالبحث عن هذا الكود التالي.

</head>

* عند ايجاده ضع فوقه الكود التالي.

<style type="text/css">
#featuredbwidget{position:relative;overflow: hidden;width:800px;height:350px;margin:5px auto;}
.featslider{height:100%;width:100%;overflow:hidden;}
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative;height:100%;width:100%;}
ul.featured-widget-list li{display:none}
ul.featured-widget-list li:nth-child(1){display:block;line-height:0}
ul.featured-widget-list img{border:0;width:100%;height:100%}
ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtmldjYkvErc4LKoYQngdPvRl6OnxVpW8dmOduaCu5u2452fBRYpXFgHLboAwwHoZw0wC8Fl9jGl6hbBgXqaYpZ1E1F9VSqIG_wSB_I57h3aLe4qSI39zaGpYXQvFwTSnlV7fJhCpnS_U/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}
ul.featured-widget-list .featuredbg:hover{opacity:.1}
ul.featured-widget-list
h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px Droid Arabic Kufi;overflow:hidden}
ul.featured-widget-list li:hover h5{bottom:30px}
ul.featured-widget-list .featured-meta{font: 11px Droid Arabic Kufi;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}
ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}
.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”;filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.feat-prev{float:left;}
.feat-next{float:right;}
.feat-buttons a.feat-prev::before,
.feat-buttons a.feat-next::before{content:””;width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>

* اعد البحث عن الوسم التالي.

</body>

* عند ايجاده ضع اعلاه (فوقه) الكود التالي.

<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://alawirisaddam.blogspot.com",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLxSkpPDU8Kpgwx8t3l3K5hf3q0M6HVx2FSn61_9Gz6wpF_obRCu16dr9WrH7pLkiMJBkOOdvM0EWJlNlsV-E98D9iJ2Xnubo4VGEH5ED02KEvEezL3j4_iGzb21omb2zvrkGnMRlsSWo/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]></script>

* لا تنسى ان تقوم بالتعديل على الكود السابق وذلك بتغيير رابط مدونتي https://alawirisaddam.blogspot.com برابط مدونتك.

* السلايد يظهر جميع المواضيع المدونة ولجعله يظهر حسب التسميات قم بتغير كلمة false التي في الكود السابق الى التسمية التي تريد.

* الان نأتي الان لوضع الكود المسؤول عن اظهار سلايد، ويمكن وضعه في اي مكان تريده انت في القالب ، في حال لم تعرف يمكن اخبارنا في تعليق وسيسرنا مساعدتك.

<div id="featuredbwidget"/>

* بعد انتهاء قم بحفظ المظهر وشاهد النتيجة.

ملاحظة: في حال لم يشتغل معك السلايد شو هذا معناه ان مدونتك لا يوجد بها مكتبة الجي كويري 

سلايد شو يعرض المواضيع حسب التسميات

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

سلايد شو يعرض المواضيع حسب التسميات

شرح كيفية تركيب السلايد شو:

1- الخطوة الاولى هي البحث عن الوسم التالي.

</head>

عندما تجده قم بوضع الكود التالي اعلاه.

        <style>

        /* slider */

        .slider-wrapper {

            text-align: center;

            font-size: 20px;

            margin: 0px auto -66px auto;

            padding: 76px 50px 0px 50px;

            height: 400px

            box-sizing: content-box;

            max-width: 1300px;

        }

        .slider-wrapper .section {

            margin: 0px;

        }

        .slider-wrapper .widget {

            margin: 0px;

        }

        ul#recn-b {

            width: 97%;

            margin: auto;

            border: 4px solid #fff;

            border-radius: 3px;

        }

        .owl-controls{ position:absolute;  right:6px;  top:11px}

        .owl-nav &gt;div {

            display: inline-block;

            width: 32px;

            height: 30px;

            text-align: center;

            color: #ED0005;

            margin-right: 5px;

            line-height: 29px;

            cursor: pointer;

            background: #FFF;

            font-weight: bold;

            font-size: 26px;

        }

        .owl-nav &gt;div:hover {

            color: #FFF;

            background: #ED0005;

          }

        .owl-nav .owl-next:before{ content:&quot;\f104&quot;;  font-family:fontawesome}

        .owl-nav .owl-prev:before{ content:&quot;\f105&quot;;  font-family:fontawesome}

        .mag-content {

            position: absolute;

            bottom: 0;

            height:100%;

            z-index: 99999;

            padding: 150px 20px 20px 20px;

            display: block;

            width: 100%;

            overflow: hidden;

            transition: 0.2s;

            vertical-align: middle;

            text-align: right;

            background-image: -webkit-linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));

            background-image: -moz-linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));

            background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));

            background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.10),rgba(237, 0, 5, 0.60));

        }

        .mag-content:hover  {

            background-image: -webkit-linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));

            background-image: -moz-linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));

            background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));

            background-image: linear-gradient(200deg, rgba(247, 64, 71, 0.5),rgba(237, 0, 5, 0.8));

        }

        ul#recn-b li {

            height: 400px;

            position: relative;

            padding: 0px;

            list-style: none;

            overflow: hidden;

        }

        ul#recn-b li .mag-thumb {

            width: 100%;

            height: 100%;

        }

        .recent-author:before{ content:&quot;\f007&quot;;  font-family:fontawesome;  margin-left:5px;  display:inline-block}

        .recent-meta {

            text-align: center;

            padding-top: 20px;

        }

        .recent-meta &gt;span {

            font-size: 22px;

            color: #f9f9f9;

        }

        h3.mag-title a {

        font-family: &#39;Acme&#39;,El Messiri;

            color: #fff;

            font-weight: normal;

            display: block;

            line-height: 28px;

            padding-top: 150px;

            text-align: center;

            font-size: 50px;

        }

        .mag-thumb a {

            display: block;

            width: 100%;

            height: 100%;

        }

        .owl-carousel .animated{-webkit-animation-duration:1000ms;animation-duration:1000ms;-webkit-animation-fill-mode:both;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.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);

            width: 100%;

            height: 100%;

            overflow: hidden;

        }

        .owl-carousel .owl-controls .owl-dot,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .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-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d}.owl-carousel.owl-text-select-on .owl-item{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.owl-carousel .owl-grab{cursor:move;cursor:-webkit-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}

        .owl-carousel.owl-rtl {

            direction: rtl;

            margin: 0px;

            padding: 0px;

        }

        .owl-carousel.owl-rtl .owl-item{float:left}

        .no-js .owl-carousel{display:block}.owl-carousel .owl-item .owl-lazy{opacity:0;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-item img{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(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;-webkit-transition:scale 100ms ease;-moz-transition:scale 100ms ease;-ms-transition:scale 100ms ease;-o-transition:scale 100ms ease;transition:scale 100ms ease}.owl-carousel .owl-video-play-icon:hover{-webkit-transition:scale(1.3,1.3);-moz-transition:scale(1.3,1.3);-ms-transition:scale(1.3,1.3);-o-transition:scale(1.3,1.3);transition: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;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;-webkit-transition:opacity 400ms ease;-moz-transition:opacity 400ms ease;-ms-transition:opacity 400ms ease;-o-transition:opacity 400ms ease;transition:opacity 400ms ease}.owl-carousel .owl-video-frame{position:relative;z-index:1}

        </style>

2- اعد البحث عن الوسم التالي.

</body>

عند ايجاده قم بوضع الكود التالي فوقه.

-- ستجد الكود قي هذه الصفحة --

3- الان مع اخر كود قم بوضعه في المكان الذي تريده ان يظهر فيه السلايد شو.

        <b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>

        <b:section id='slider-wrapper'>

          <b:widget id='HTML131' locked='false' title='' type='HTML' visible='true'>

            <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'>

            <data:content/>

          </div>

          <b:include name='quickedit'/>

        </b:includable>

          </b:widget>

        </b:section>

        </b:if>

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

اضافة سلايد شو متجاوب مع الاجهزة الذكية

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

اضافة سلايد شو متجاوب مع الاجهزة الذكية

اضافة سلايد شو للمدونة:

- قم بدخول لمدونتك ثم الى التخطيط بعدها اضافة آدة ثم اختر HTML/JavaScript.

- قم بنسخ الكود التالي والصقه داخل آدة HTML/JavaScript.

    <style type="text/css">

    #top-main{position:relative}

    #top-main .widget{border:0;padding:0 0 22px}

    #top-main h2{position:absolute;left:-9999px}

    #slides li {

    display: none;

    background-color: white;

    padding: 4px;

    border: 1px solid #CECECE;

    -webkit-border-radius: 3px;

    margin-top: 0;

    -moz-border-radius: 3px;

    -o-border-radius: 3px;

    border-radius: 3px;

    position: absolute;

    }

    #slides li:nth-child(1) .overlayx {

    background-position: 0 0;

    }

    #slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

    #slides ul,#slides li{padding:20;margin:0;list-style:none;position:relative}

    #slides ul{height:275px}

    #slides li{width:49.9%;height:100%;position:absolute;display:none}

    #slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}

    #slides li:nth-child(1){left:0;top:0}

    #slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}

    #slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}

    #slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}

    #slides a{display:block;width:100%;height:100%;overflow:hidden}

    #slides img{width:100%;height:100%}

    #slides .overlayx {

    position: absolute;

    top: 0;

    left: 0;

    border: 4px solid #fff;

    width: 100%;

    height: 100%;

    z-index: 2;

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_Wq4O65ylIYtXSVyrpvN9Lm_p4l3iGp9ViCbEfldvtDYKlfVKAVHLRWSH3OEiAm9dEMasjmzDoJH2jWHXJ4SGKtsZZN-W-fJffguOhSFzBvhUT0Tja6lbmerXEj1WJvejFwNFhuVLLs/s1600/cnmubg-fade.png);

    background-position: 70% 70%;

    background-repeat: repeat-x;

    -webkit-transition: all .4s ease-in-out;

    -moz-transition: all .4s ease-in-out;

    -o-transition: all .4s ease-in-out;

    -ms-transition: all .4s ease-in-out;

    transition: all .4s ease-in-out;

    }

    #slides h4{position:absolute;bottom:25px;width:100%;padding:0 10px;margin:0 -5px;font-size:14px;z-index:3;color:white;text-shadow:0 1px 2px #918F8F}

    #slides li:nth-child(3) h4,#slides li:nth-child(2) h4{font-size:14px}

    #slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}

    #slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}

    #slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

    #slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

    #buttons{margin: 0px auto;text-align: center;width: 10%;}

    #buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}

    #buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

    #buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}

    @media only screen and (max-width:600px){

    #slides ul{height:600px}

    #slides li:nth-child(1){width:100%;height:49.8%}

    #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}

    #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}

    #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}

    }

    #slides .overlayx {

    position: absolute;

    top: 0;

    left: 0;

    border: 4px solid white;

    width: 100%;

    height: 100%;

    z-index: 2;

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2_Wq4O65ylIYtXSVyrpvN9Lm_p4l3iGp9ViCbEfldvtDYKlfVKAVHLRWSH3OEiAm9dEMasjmzDoJH2jWHXJ4SGKtsZZN-W-fJffguOhSFzBvhUT0Tja6lbmerXEj1WJvejFwNFhuVLLs/s1600/cnmubg-fade.png);

    background-position: 60% 60%;

    background-repeat: repeat-x;

    }

    </style>

    <div id="featuredpost">

    </div>

    <script type="text/javascript">

    //<![CDATA[

    $(document).ready(function () {

    FeaturedPost({

    blogURL:"http://alawirisaddam.blogspot.com/",

    MaxPost:15,

    idcontaint:"#featuredpost",

    ImageSize:300,

    interval:7000,

    autoplay:true,

    tagName:false

    });

    });

    //contnue

    function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"#featuredpost",ImageSize:100,interval:5000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://softglad.at.ua/images/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx">prev</a><a href="#" id="nextx">next</a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};

    function rotate() { $('#nextx').click();}

    //]]>

    </script>

قم باستبدال الرابط الاحمر http://alawirisaddam.blogspot.com/ برابط مدونتك.

في حال اردت السلايد ان يقوم بعرض واضيع في قسم معين قم بتغيير tagName:false.

بهذا الكود tagName:"التسمة" مع تغيير كلمة التسمة بالقسم الذي تريده.

في حال لم تشتغل معك اضافة معناه ان مدونتك لا تحتوي على مكتبة الجي كويري، 

تعديل المقال