تركيب أجمل سلايدر لمدونات البلوجر سلايدر هسبريس

مميزات هذا السلايدر

يعمل بطريقة أوتوماتكية بمعنى أنك ستحدد له القسم الذي سيعرض مشاركاته

أنيق وجد خفيف، سكربتاته نضيفة

متوافق مع جميع المتصفحات والمدونات

والمزيد ستكتشفه بنفسك..

شرح التركيب:

ثم ستبحث عن هذا الكود : </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;}

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="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 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>

ستتوجه إلى الستايل الخاص بمدونتك وذالك عن طريق التوجه إلى قالب مدونتك ثم تحرير 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'> وضع الكود التالي تحتهما/بعدهما وإن لم تجد الكودين إبحث عن 'رسائل المدونة الإلكترونية' وضع الكود فوق السطر الذي فوقها.

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

مدونة أفكارنا - afkarona blog

تركيب أجمل سلايدر لمدونات البلوجر سلايدر هسبريس

مقالات قد تهمك

أقسام الوصول السريع ( مربع البحث )

تركيب أجمل سلايدر لمدونات البلوجر سلايدر هسبريس

مقالات قد تهمك