إضافة سليدرشو كالذي في مدونة شاهدنا

السلام عليكم

اليوم سنتعرف على كيفية اضافة السلايدر الموجود على مدونة شاهدنا.

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

 ]]></b:skin>

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

#featured{

margin-bottom:10px;

}

.sliderwrapper{







;












border-bottom-wid





position: relativ

eth: 6px;

height: 124px;
}











isibility: hidden;













vpositi




.sliderwrapper .contentdiv
{on: absolute;
height: 100%;







m.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;












padding:15px 15px 15px 0px;




filter:progid:DXImageTransfo
rbackground:#f1f1f1;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #ABABAB;
margin-top:10px;
}
.pagination{







 4px 8px;


}








agin



.
p
text-align: right;
margin-top: 50px;
padding:5px;
}
.pagination a{
font:11px Arial;
color:#a3a3a3;
padding:4px 8p
xation a.selected{
color:#4f4f4f;
}
.pagination .prev,.pagination .next { color:#EAEAEA;







px 10px 10px !important;












bottom:0;












 










float:lef















t








font-size:0px; background:none; padding:0px; }
.featuredPost{
width:410px;
padding:0px 1
0!important;
margin-right: 54px;
}
.featuredPost a{
color:#515151;
font: 18px "Microsoft Sans Serif";
margin:0;
padding:0;
}

px; margin:4px 0 0 0; color:#797979
.featuredPost h2{margin:0 0 8px 0;}
.featuredPost span{font-size:11px; margin:0; color:#797979;}
.featuredPost p{font-size:1
2;}
.sliderPostPhoto a img{float: right !important;}

 !important;}
.sliderPostPhoto{float: right !important; width:100px

                                                                                                   

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

</head>

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

<script>

/* Script from:http://simplexdesign.blogspot.com/ */

imgr = new Array();

"http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";

imgr[0] =

 

howRandomImg = true;





saBold = true;







40;












numposts1 =





summaryPost = 

17;

label1 = "الوندوز";

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

"summary" in entry) {

if 

(

ar postcontent = entry.summary.$t;}





velse var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

 ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

s = postcontent  

 

f((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;




i

ar 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;




v

}}

var daystr = day+ ' ' + m + ' ' + y ;

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

var trtd = 

'

ocument.write(trtd);





dj++;
}}

</script>

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

وقم أيضا بتغيير الرقم 7 باللون الأخضر إلى عدد المواضيع التي تريدها أن تظهر على السلايدر 

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

  

</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]







dler fired whenever script changes slide












//previndex holds index of last slide viewed b4 cur





onChange: function(previndex, curindex){ //event ha

nrent (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

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

  <div id='main-wrapper'>أو<div id='content'>أو<div id="content"></div>

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

<b:if cond='data:blog.pageType == &quot;index&quot;'>

<div id='featured'>

<div class='sliderwrapper' id='slider1'>

<script>

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;);

document

.

/script>





<</div>







ss='pagination' id='paginate-slider1'>












</div>





<div cl

a</div>



</b:if>

بعد هذا كله قم بالضغط على حفظ التغييرات ومبروك عليك السلايدر