الرئيسية / blogger / شرح إضافة سلايد شو بشكل تلقائي لمدونات بلوجر

شرح إضافة سلايد شو بشكل تلقائي لمدونات بلوجر

شرح إضافة سلايد شو بشكل تلقائي لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

مرحبا بزوار ومتتبعي مدونة الشهادة مع موضوع جديد بعنوان شرح إضافة سلايد شو بشكل تلقائي لمدونات بلوجر

من أهم و أكثر الإضافات استعمالا في المدونات هيا اضافة , سلايد شو , حيث تقدم للزائر أو المتابع أخر الأخبار أو المواضيع أو المقالات بتصميم جميل و مميز وجدب الزائر .

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

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>

قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! 🙂

شاهد أيضاً

قالب White لمدونات بلوجر متعدد الاستخدامات

قالب White لمدونات بلوجر متعدد الاستخدامات قوالب بلوجر

قالب White لمدونات بلوجر متعدد الاستخدامات قالب White لمدونات بلوجر متعدد الاستخدامات مرحبا بكم عشاق …

قالب روتكس لمدونات بلوجر

قوالب blogger- تحميل قالب روتكس بلوجر اخر اصدار

قالب روتكس لمدونات بلوجر قوالب blogger– تحميل قالب روتكس بلوجر اخر اصدار السلام عليكم ورحمة …

تحميل قالب Levon لمدونات بلوجر متعدد الاستخدامات

قوالب بلوجر- تحميل قالب Levon بلوجر متعدد الاستخدامات

تحميل قالب Levon لمدونات بلوجر متعدد الاستخدامات قوالب بلوجر– تحميل قالب Levon بلوجر متعدد الاستخدامات …

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية

قوالب بلوجر. قالب sendigo بلوجر للمجلات والمدونات التقنية السلام عليكم و رحمة الله، قوالب بلوجر. …

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *