سلايد شو احترافي يعمل تلقائيا بالاقسام لمدونات بلوجر

سلايد شو احترافي ذات شكل جذاب يعمل تلقائيا بواسطة اضافة القسم فقط ( التسميات ) وهو يقوم بوضع المواضيع اللتى تتواجد بالقسم الذى قمت بختيارو تلقائياٌ 

شرح التركيب

قم بأخذ نسخة احتاطية من قالب وكن حريصا على استخدام هذه الخدمة دائما عند تعديل اى كود فى مدونتك

لوحة التحكم - القالب - تحرير HTML

قم بالبحث عن ]]></b:skin>

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

#featured{ margin-bottom:10px; } .sliderwrapper{ position: relative; border-bottom-width: 6px; height: 124px; } .sliderwrapper .contentdiv{ visibility: hidden; position: absolute; height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1; padding:15px 15px 15px 0px; background:#f1f1f1; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #ABABAB; margin-top:10px; } .pagination{ text-align: right; margin-top: 50px; padding:5px; } .pagination a{ font:11px Arial; color:#a3a3a3; padding:4px 8px 4px 8px; } .pagination a.selected{ color:#4f4f4f; } .pagination .prev,.pagination .next { color:#EAEAEA; font-size:0px; background:none; padding:0px; } .featuredPost{ width:410px; padding:0px 10px 10px 10px !important; bottom:0; float:left !important; margin-right: 54px; } .featuredPost a{ color:#515151; font: 18px "Microsoft Sans Serif"; margin:0; padding:0; } .featuredPost h2{margin:0 0 8px 0;} .featuredPost span{font-size:11px; margin:0; color:#797979;} .featuredPost p{font-size:12px; margin:4px 0 0 0; color:#797979;} .sliderPostPhoto a img{float: right !important;} .sliderPostPhoto{float: right !important; width:100px !important;}

ثم ابحث عن هذا الكود </head>

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

<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 =7; 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="155" height="121" 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++; }} </script>

وقم بتغير كلمه القسم بالقسم الذى تريد جعله يعرض به المواضيع فى السلايد شو

ثم قم بالبحث على </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>

واخيرا هذا الكود هو المسؤل على وضع السلايد فى المكان الذى تختاره انت

لوضع السلايد شو فى وضعه الافتراضى

ابحث عن

  <div id='main-wrapper'>
  أو
  <div id='content'>
  أو
  <div id="content"></div>

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

<b:if cond='data:blog.pageType == "index"'> <div id='featured'> <div class='sliderwrapper' 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='pagination' id='paginate-slider1'> </div> </div> </b:if>

ومبروك عليك السلايد شو التلقائيا