طريقة تركيب سلايدرشو

اليوم ستتعرف على كيفية اضافة سلايدشو مدونة Th1Pro-Morocco.

هههه مدونتي بعد كثرة الطلب 

ها أنا أفي بوعدي للمتتبعين والزوار الكرام 

طريقة تركيب إضافة السلايدر في مدونات بلوجر الشخصية :

وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب, من لوحة التحكم اتجه الى تصميم ثم تحرير HTML, ضع علامة في خانة توسيع القوالب, ثم إضغط في الكيبورد على Ctrl + F, و ابحث عن الكود التالي :

]]></b:skin>

ثم ضع فوقه/قبله كود CSS التالي :

الآن أضف الكود التالي فوقه/قبله :

#alwansd{height: 185px;background: rgb(90, 90, 90);margin: 0 0 20px 20px;border-bottom: 4px solid #00B4FF;}
.alwanw{position: relative;height: 160px;}
.alwanw .contentdiv{visibility: hidden;position: absolute;height: 96%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.alwan-ps{text-align: right;float: left;width: 50px;height: 25px;margin-left: 355px;}
.alwan-ps a{display:none;}
.alwan-ps .prev { display:block;font-size:0px;background:#66c7d6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaG0_-svyqfvJPEIxbAnC7uEz9PEnz0fnsLyR0Dlqi2Q97nbYQ2-He6tegz2IIWUiCDRFPDtJPyhYIONOos6axO1LLo38dfhRSEkVxFMWB10d8SL-bO1I8EMP-yDTL7AQJ5bSmmuMWxs/s1600/pre.png )center no-repeat;width: 25px;height: 25px;float: left;}
.alwan-ps .prev:hover{ background:#595959 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYaG0_-svyqfvJPEIxbAnC7uEz9PEnz0fnsLyR0Dlqi2Q97nbYQ2-He6tegz2IIWUiCDRFPDtJPyhYIONOos6axO1LLo38dfhRSEkVxFMWB10d8SL-bO1I8EMP-yDTL7AQJ5bSmmuMWxs/s1600/pre.png )center no-repeat; }
.alwan-ps .next  {display:block;font-size:0px;background:#00B4FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBuDAVpqzkcbCjgvX91Wp1M8rfj3zKhZ1cHt-FWvXSITH6Yem0ut3MuklGLtkAMZgz0Rj_8HpYqHxztRxkWlCF6yrSS0Dp1eRH9QvGB_8ABftjLVJwxdt3wKXrji3Lw-mcuZGkKhclc-E/s1600/next.png)center no-repeat;width: 25px;height: 25px;float: right;}
.alwan-ps .next:hover{ background:#595959 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBuDAVpqzkcbCjgvX91Wp1M8rfj3zKhZ1cHt-FWvXSITH6Yem0ut3MuklGLtkAMZgz0Rj_8HpYqHxztRxkWlCF6yrSS0Dp1eRH9QvGB_8ABftjLVJwxdt3wKXrji3Lw-mcuZGkKhclc-E/s1600/next.png)center no-repeat;}
.alwanip{width: 377px;padding: 5px 5px 5px 5px !important;bottom: 0;float: left !important;margin-right: 148px;}
.alwanip a{color:#dcdcdc;font: 13px droidkufi-bold;margin:0;padding:0;line-height: 19px;}
.alwanip h6{margin:5px 0 0 0;}.alwanip h6 a:hover {color:#00B4FF;}.alwanip .alwand{font:12px arial; margin:5px 0; color:#a5a5a5; }.alwanip p{font-size: 13px;margin: 0;color: #a5a5a5;line-height: 23px;}.alwansf a img{float: right !important; }.alwansf {float: right !important; width:100px !important;}
.column-center-outer {
width: 100%;
}

مع تغيير 00b4ff# بي اللون الطاغي في مدونتك و اللذي يمكنك الحصول عليه من هنا

الآن ابحث عن : 

</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 = 150;
numposts1 =10;
label1 = "Your Label";
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="alwansf"><a href="'+posturl+'"><img width="245" height="189" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';  
document.write(trtd);    
j++;
}}


</script>

مع تغيير Your Label باسم القسم الذي سيتم عرض مواضيعه عشوائيا

بعد ذلك ابحث عن :

</body>

ثم الآن أضف الكود التالي فوقه/قبله  :

&lt;script src=&#39;http://dl.dropbox.com/u/12924430/contentslider.js&#39;&gt;&lt;/script&gt;

&lt;script&gt;

featuredcontentslider.init({

id: &quot;slider1&quot;, //id of main slider DIV

contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]

toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]

nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; 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)

}

})

&lt;/script&gt;

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

  <div id='main-wrapper'>أو<div id='content'>أو<div id="content"></div>أو <div class='column-center-inner'>

القالب أضف الكود التالي بعده/أسفله :

(ملاحظة : إذا لم تجد أي كود من هذه الأكواد فقم بالبحت عن هذا الكود :

  <b:section class='main' id='main' showaddelement='no'> ثم ضع الكود الأتي فوقه/قبله  )

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

<div id='alwansd'>

<div class='alwanw' 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='alwan-ps' id='paginate-slider1'>

</div>

</div>

</b:if>

شكرا على حسن المتابعة ولا تبخلو علينا بتعلقاتكم