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

سلايد شو ممتاز بلوجر بدون اى مشاكل و سهل التركيب و التشغيل تابع معي


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

<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/AVvXsEihF9-qMeTmoYgAwxL8wddR-gi1Dfp9G5TXBlVenTc27qpdiSQ97SH3UhNKJyX8Jsuwl-3S5lUuxulLIcLviyWSa6pXyJd9vfUbcv3tnxFXV-oHP_mZVG8peR9apaUfVM3INnLe-32oYFY/s1600/el3bkary.com-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 transparent transparent #535353;position:absolute;top:50%;margin-top:-8px;margin-right:-10px;right:50%}

#buttons a#nextx::before{border-color:transparent #535353 transparent transparent;margin-right:-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/AVvXsEihF9-qMeTmoYgAwxL8wddR-gi1Dfp9G5TXBlVenTc27qpdiSQ97SH3UhNKJyX8Jsuwl-3S5lUuxulLIcLviyWSa6pXyJd9vfUbcv3tnxFXV-oHP_mZVG8peR9apaUfVM3INnLe-32oYFY/s1600/el3bkary.com-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://www.el3bkary.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>

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

وبعد التعديل سوف نضغط حفظ سوف يتم تشغيل السلايد شو فى مدونتك , اى استفسار لا تتردد بالسؤال فى التعليقات