سلايد شو بلوجر تلقائي ورائع لمدونتك

يعتبر السلايد شو من مميزات لتجميل المدونة وجعلها مدونة احترافية بتصميم رائع , كما يساعد على اظهار احداث المواضيع في المدونة , لتسهيل الوصول الى المواضيع الجديدة

لذلك ساقدم سلايد شو تلقائي ورائع

*لإضافة السلايدر مباشرة تذهب إلى لوحة تحكم مدونتك وتضغط على قالب ثم تحرير html وتضع العلامة على  مربع توسيع قالب واجهة المستخدم ثم تضغط في الكيبورد على ctrl+f وتبحث عن هذا الكود

  ]]></b:skin>

بعد أن تجده قم بوضع هذا الكود فوقه

#featured{
margin-bottom:10px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 124px;
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;
padding:15px 15px 15px 0px;
background:#f1f1f1;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #ABABAB;
margin-top:10px;
}
.pagination{
text-align: right;
margin-top: 50px;
padding:5px;
}
.pagination a{
font:11px Arial;
color:#a3a3a3;
padding:4px 8px 4px 8px;
}
.pagination a.selected{
color:#4f4f4f;
}
.pagination .prev,.pagination .next { color:#EAEAEA;
font-size:0px; background:none; padding:0px; }
.featuredPost{
width:410px;
padding:0px 10px 10px 10px !important;
bottom:0;
float:left !important;
margin-right: 54px;
}
.featuredPost a{
color:#515151;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#797979;}
.featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;}
.sliderPostPhoto a img{float: right !important;}
.sliderPostPhoto{float: right !important; width:100px !important;}

*ثم مرة أخرى كمرحلة ثانية  إبحث عن هذا الكود

</head> 

  بعد أن تجده قم بوضع هذا الكود قبله مباشرة

<script>
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
numposts1 =15;
label1 = "myzzaji";
function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="155" height="121" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
</script>

بعد إضافته قم بتغيير myzzaji باللون الأحمر إلى القسم الذي تريده أن يضهر في السلايدر
وقم أيضا بتغيير الرقم 15 باللون الأصفر إلى عدد المواضيع التي تريدها أن تظهر على السلايدر

*وكمرحلة ثالثة قم بالبحث مرة أخرى عن هذا الكود

</body>

وقم بإضافة هذا الكود قبله 

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script>
<script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>

*وفي الأخير قم بالبحث عن هذا الكود

<div id='main-wrapper'>

 وقم بإضافة هذا الكود بعده

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

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