
السلام عليكم ورحمة الله وبركاته
مرحبا بزوار ومتتبعي مدونة الشهادة مع موضوع جديد بعنوان شرح إضافة سلايد شو بشكل تلقائي لمدونات بلوجر
من أهم و أكثر الإضافات استعمالا في المدونات هيا اضافة , سلايد شو , حيث تقدم للزائر أو المتابع أخر الأخبار أو المواضيع أو المقالات بتصميم جميل و مميز وجدب الزائر .
طريقة تركيب السلايد شو :
1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .
2- توجه إلى لوحة التحكم خاصتك على بلوجر
3- توجه نحو تعديل القالب
إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)
]]></b:skin>
فوقه مباشرة (قبله) , أضف الكود التالي :
#alwansd{ height: 428px; margin: 0 0 0px 0px; padding: 15px 28px 15px 16px; width: 672px; background: #373737; } .alwanw{ position: relative; height:385px; } .alwanw .contentdiv{ visibility: hidden; position: absolute; opacity: 1; } .alwan-ps{ text-align: right; float: left; width: 670px; height: 11px; margin-left:-43px; } .alwan-ps .toc{ font-size: 0px; width: 102px; 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: 618px; padding: 10px !important; bottom: 0; float: left !important; position: absolute; background:url(https://3.bp.blogspot.com/–PmJCnAgSsc/USDs0q1v30I/AAAAAAAADoY/_nmnrEqXG4U/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:#c2df00;} .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:680px!important;} .column-center-outer { width: 680px; }
ابحث من جديد , عن :
</head>
قبله مباشرة أضف الكود التالي :
(غير كلمة ashahada.com بإسم القسم الذي تريده أن يظهر في السلايد شو)
<script> /* Script from:http://computer-for-security.blogspot.com */ imgr = new Array(); imgr[0] = “http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg”; showRandomImg = true; aBold = true; summaryPost = 150; numposts1 = 6; label1 = ” ashahada.com”; 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=”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>
إبحث الأن عن :
</body>
فوقه مباشرة أضف هذا الكود :
script src=’http://albaadani.googlecode.com/files/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
أخر خطوة : إبحث عن :
<div id=’main-wrapper’>
بعده / أسفله مباشرة , أضف هذا الكود
<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>
قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! 🙂
Excellent post. Keep posting such kind of info on your blog.
Im really impressed by it.
Hey there, You’ve performed a great job. I’ll definitely digg it and for my
part recommend to my friends. I am sure they will be benefited from this web site.