بسم الله الرحمان الرحيم الكثير من اصحاب المدونات العربية يرغبون في تركيب سلايدشو المحترف و لاكنهم يواجهون مشاكل في ذلك . في هذه التدوينة سوف اعطيكم الطريقة الصحيحة لتركيب سلايدشو المحترف .
القالب أضف الكود التالي بعده/أسفله :
(ملاحظة : إذا لم تجد أي كود من هذه الأكواد فقم بالبحت عن هذا الكود :
<b:section class='main' id='main' showaddelement='no'> ثم ضع الكود الأتي فوقه/قبله )
<b:if cond='data:blog.pageType == "index"'>
<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>
اتمنى ان تكون هذه التدوينة قد افادتكم
وقبل القيام باي تغيير قم بحفظ نسخة احتياطية للقالب, من لوحة التحكم اتجه الى تصميم ثم تحرير HTML, ضع علامة في خانة توسيع القوالب, ثم إضغط في الكيبورد على Ctrl + F, و ابحث عن الكود التالي :
]]></b:skin>
ثم ضع فوقه/قبله كود CSS التالي :
#alwansd{
height: 397px;
margin: 0 0 20px 20px;
padding: 15px 17px 15px 16px;
width: 617px;
background: #373737;
border-top: 4px solid #00B4FF;
}
.alwanw{
position: relative;
height:385px;
}
.alwanw .contentdiv{
visibility: hidden;
position: absolute;
opacity: 1;
}
.alwan-ps{
text-align: right;
float: left;
width: 618px;
height: 11px;
margin-left: -1px;
}
.alwan-ps .toc{
font-size: 0px;
width: 50.5px;
height: 11px;
float: right;
background: #5b5b5b;
margin-left: 1px;
}
.alwan-ps a.selected{
background:#dfdfdf;
}
.alwan-ps .prev, .alwan-ps .next {display:none; }
.alwanip{
width: 597px;
padding: 10px !important;
bottom: 0;
float: left !important;
position: absolute;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7MvGGYuGB46qZ1ILMcRQw99E9OJrHRvaIuzO5AK3WEf-gpjFE438D3YccUxBDU2Nkz3vzHXMTpGpXepL9seBt5RGBH77VaLTIRGo_q5ab1ndI-C_WRyGoZzO9K844XmUuELWuhtQi8Dc/s1600/backslide.png);
}
.alwanip a{
color:#dcdcdc;
font: 12px droidkufi-bold;
margin:0;
padding:0;
line-height: 19px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#ffa800;}
.alwanip .alwand{font:12px arial; margin:4px 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%;
}
</head>
الآن أضف الكود التالي فوقه/قبله :
<script>
/* Script from:http://drhelp4u.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 12;
label1 = "Yourlabel";
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=["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];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="617" height="385" 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>
/* Script from:http://drhelp4u.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
numposts1 = 12;
label1 = "Yourlabel";
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=["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"];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="617" height="385" 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>
ثم الآن أضف الكود التالي فوقه/قبله :
<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]
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>
<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'>أو<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 == "index"'>
<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>
اتمنى ان تكون هذه التدوينة قد افادتكم
هل أعجبك الموضوع ؟
بقلم أيوب بولعيش
مدون مغربي مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النتالفيسبوك . تويتر . جوجل بلس
