
- مميزات هذا السلايدر
- يعمل بطريقة أوتوماتكية بمعنى أنك ستحدد له القسم الذي سيعرض مشاركاته
- أنيق وجد خفيف، سكربتاته نضيفة
- متوافق مع جميع المتصفحات والمدونات
- والمزيد ستكتشفه بنفسك..
شرح التركيب:
ثم ستبحث عن هذا الكود : </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 = "كل";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;}elseif ("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="464" height="260" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h22><a href="'+posturl+'">'+posttitle+'</a></h22><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';document.write(trtd);j++;}}</script>
بعدها ستبحث عن هذا الكود </body> وستضع قبله/فوقه الكود التالي:
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/><script>
featuredcontentslider.init({
id: "slider1", //id of main slider DIVcontentsource: ["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>
ستتوجه إلى الستايل الخاص بمدونتك وذالك عن طريق التوجه إلى قالب مدونتك ثم تحرير html ثم ستبحث عن هذا الكود: ]]></b:skin>
ثم ستضع قبله/فوقه هذا الكود:
#featured {
margin-bottom: -10px;
margin-left: auto;
margin-right: 313px;
width: 463px;
}
.sliderwrapper{
position: relative;
border-bottom-width: 6px;
height: 260px;
width:460px
}
.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
height: 347px;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;
padding:0px;
background:#f1f1f1;
margin-top:2px;
width:474px
}
.pagination {
float: right;
margin-right: 6px;
margin-top: 100px;
padding: 1px;
width: 100%;
}
.pagination a {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
color: #000000;
font: 11px Arial;
padding: 4px 8px;
}
.pagination a.selected {
background:#136BB2;
border: 1px solid #444444;
color: #FFFFFF;
}
.pagination .prev,.pagination .next {
color:#EAEAEA;
font-size:0px;
background:none;
padding:0px;
float:right !important;
margin-bottom:35px !important;
}
.featuredPost {
background:#4275CE;
bottom: 0;
float: right;
line-height: 18px;
margin-right: 5px;
margin-top: 0px;
padding: 0 10px 10px !important;
width: 444px;
}
.featuredPost a {
font-family: 'Droid Arabic Kufi',Arial !important;
color: #FFFFFF;
margin: 0;
padding: 0;
}
.featuredPost h2 {margin:0 0 8px 0;color:#ffffff;}
.featuredPost span{font-size:11px; margin:0; color:#797979;}
.featuredPost p {
font-family: 'Droid Arabic Kufi',Arial !important;
color: #DDDDDD;
font: 12px 'Droid Arabic Kufi',Arial !important;
margin: 4px 0 0;
}
.sliderPostPhoto a img{float: right !important;}
.sliderPostPhoto{float: right !important; width:100px !important;}
.h22{
color:#ffffff;
}
ستبحث عن هذا الكود: <div id='main-wrapper'> إن لم تجده فابحث عن هذا: <div class='main-wrapper'> وضع الكود التالي تحتهما/بعدهما وإن لم تجد الكودين إبحث عن 'رسائل المدونة الإلكترونية' وضع الكود فوق السطر الذي فوقها.
<!-- /sidebarleft --><b:if cond='data:blog.url == data:blog.homepageUrl'><div id='featured'><div class='sliderwrapper' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");</script></div><div class='pagination' id='paginate-slider1'></div></div></b:if>