شرح اضافة سلايد شو أوتوماتيكي فى مدونتك(بلوجر)

معظم المُدوّنين على منصة البلوغر يطلبونها وكثير منهم يتخلى عن استعمال القوالب التي تتوفّر على هذه التقنية لأنها تقنية تتطلب التعديل اليدوي في كل مرة على محتوى المختصرات المُراد عرضها.
السلايد شو أنافذة عرض مختصرات المواضيع..
الخطوات بسيطة وتتطلب بعض التركيز مع مراعاة كل التوجيهات الواردة في الموضوع لا سيما فيما يتعلق بالمقاسات حتى تتماشى الإضافة مع خصوصية كل قالب يريد صاحبه أن يركبّ له سلايد شو.
الخطوات
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F).
1-قم بالبحث عن

كود HTML:

</head>

ثم قم بلصق هذا الكود قبله

كود HTML:

<> 
/*  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 = 5; 
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="590" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';     
document.write(trtd);       
j++;
}}</>

ثم عمل حفظ للقالب
يمكنك تعديل هذا الرمز ، وفقا للحاجة الخاصة بك


summaryPost = 140 ؛ --> عدد حروف ملخص الموضوع numposts1 = 5 ؛ --> عدد المشاركات او الموضيع التى تظهر فى الاضافة
حجم صورك

يمكنك التحكم فى حجم الصور من خلال تغير احجام الصور من الكود الاعلى width="590" height="240"
2-قم بالبحث عن الكود التالي

كود HTML:

</body>

ثم قم بلصق هذا الكود قبله

كود HTML:

< src='http://dl.dropbox.com/u/12924430/contentslider.js'></> <> 
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  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)
}
})</>

ثم قم بحفظ القالب 3-قم بالبحث عن هذا الكود

كود HTML:

<div id='main-wrapper'>

وضع الكود التالى بعده

كود HTML:

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='منوعات'>
<div class='sliderwrapper' id='slider1'>
<>
document.write(&quot;&lt; src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-&amp;callback=showrecentposts1\&quot;&gt;&lt;\/&gt;&quot;);
</>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

تم قم بحفظ القالب
4-قم بالبحث عن الكود التالى

كود HTML:

 ]]></b:skin>

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

كود HTML:

#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

ثم قم بحفظ القالب

اخر خطوة قم بالبحث عن كلمة"منوعات"وقم بتغيرها باسم القسم
الذى ترغب بظهور الاضافة بة وان شاء الله تشتغل معك الامور
اهدى هذا الموضوع الى الاستاذ محمد ياسين رحمة صاحب مدونة مجتمع بلوجر العربى
الموضوع مترجم من مدونة اجنبية مدونة سايلاكس ديزان.

 المصدر : http://100fm6.com/vb/showthread.php?t=243287 - 100fm6.com