طريقة إضافة سلايد شو

كيفية اضافة السلايد شو 



1-لوحة التحكم >> قالب >> تحرير Html

سنبحث عن الكود التالي باستخدام Ctrl+F

]]></b:skin>


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

رمز Code:

#alwansd{height: 186px;background:#fff;border-top: 3px solid #dddddd;box-shadow: 0 2px 2px rgb(209, 209, 209); margin: 0 0 20px 22px;padding:14px;}
.alwanw{position: relative;height: 163px;}
.alwanw .contentdiv{visibility: hidden;position: absolute;height: 96%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.alwan-ps{float: left;width: 57px;height: 27px;}
.alwan-ps a{display:none;}
.alwan-ps .next {float:right;width: 27px;height: 27px; font-size:0px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAEjoCW73q_oaEKdtiynFOd9lnYkm2cH-uLxSei11HYyUslncSEYhhJjynhLjTKegv0pp4akBR4H0NS7f0lOjeScbv7iCroP0W0OJkYn0PazqHb_M7-QTvPBYsftAqh0cSci5tlYWwWc/s1600/p-slidshowe.png) -30px 0px }
.alwan-ps .prev  {float:left;width: 27px;height: 27px;font-size:0px;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAEjoCW73q_oaEKdtiynFOd9lnYkm2cH-uLxSei11HYyUslncSEYhhJjynhLjTKegv0pp4akBR4H0NS7f0lOjeScbv7iCroP0W0OJkYn0PazqHb_M7-QTvPBYsftAqh0cSci5tlYWwWc/s1600/p-slidshowe.png) 0px 0px}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAEjoCW73q_oaEKdtiynFOd9lnYkm2cH-uLxSei11HYyUslncSEYhhJjynhLjTKegv0pp4akBR4H0NS7f0lOjeScbv7iCroP0W0OJkYn0PazqHb_M7-QTvPBYsftAqh0cSci5tlYWwWc/s1600/p-slidshowe.png) -30px 0px }
.alwan-ps .prev:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAEjoCW73q_oaEKdtiynFOd9lnYkm2cH-uLxSei11HYyUslncSEYhhJjynhLjTKegv0pp4akBR4H0NS7f0lOjeScbv7iCroP0W0OJkYn0PazqHb_M7-QTvPBYsftAqh0cSci5tlYWwWc/s1600/p-slidshowe.png) 0px 0px}
.alwanip{width: 340px;padding: 0 !important;bottom: 0;float: left !important;margin-right: 180px;}
.alwanip a{color:#737373;font: 17px droidkufi-bold;margin:0;padding:0;line-height: 26px;}
.alwanip h6{margin:0;}.alwanip h6 a:hover {color:#e74c3c;}.alwanip p{font-size: 13px;margin: 0;color: #8c8d8d;line-height: 26px;}.alwansf a img{float: right !important; }.alwansf {float: right !important; width:100px !important;}
.column-center-outer {
width: 100%;
}

ثم ابحث عن هذا الكود 

</head>

قم بوضع هذا الكود قبله مباشرة 

رمز Code:

<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 = 100; 
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="alwansf">
<a href="'+posturl+'"><img width="263" height="188" 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>

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


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

وبعد ذلك نبحث عن هذا الكود

</body>

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

رمز Code:

<script src='http://dl.dropbox.com/s/h22yjsdmujac7el/slider-by-dz-pcpro.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'>

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

رمز Code:

<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<div id='alwansd'>
<div class='alwanw' 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='alwan-ps' id='paginate-slider1'>
</div>
</div>
</b:if>

اذا لم تجد هذا الكود <div id='main-wrapper'>

ابحث عن 

رسائل المدونة الإلكترونية

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



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