اضافة سلايدر شو احترافي تلقائي الى مدونات البلوجر ( متجاوب 1000%)

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

1. يقوم بعرض المواضيع التي انت تحددها له بطريقة اوتوماتيكية
2. أنيق جدا وخفيف على المدونة كما أن سكريبتاته نضيفة 
3. متوافق مع جميع مدونات البلوجر ومتصفحات (متجاوب بلكامل)

وهنالك الكثير سوف تكتشفه بنفسك...

طريقة التركيب

1. اذهب الى تحرير HTML الخاص بمدونتك

ثم إبحث عن الكود التالي]]></b:skin> ثم ضع قبله هذا الكود

اfeatured{margin: 0 0 1000px 20px;}<br />.sliderwrapper{position: relative;overflow: hidden;border: 2px solid #5A2C8E;border-bottom-width:6px;height:250px;background:rgba(90, 44, 142, 0.6);}<br />.sliderwrapper .contentdiv{background:#5A2C8E;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}<br />.pagination{text-align: right;background-color:#5A2C8E;padding: 2px 10px 10px}<br />.pagination a{font-size:11px;color:#fff;padding: 5px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:3px;border-top-right-radius:3px;background:#68667B}<br />.pagination a:hover{color:#68667B;background-color:#881E5D}<br />.pagination a.selected{color:#68667B;background-color:#fff}<br />.featuredPost{width:100%;padding:5px 10px 10px;background:#5A2C8E;background:rgba(90, 44, 142, 0.4);color:#dedde5;position:absolute;bottom:0}<br />.featuredPost a{color:#fff}<br />.featuredPost a:hover{color:#dedde5}<br />.featuredPost h2{margin:0;font-family:droidkufi-bold, tahoma;font-size:14px;line-height:1}<br />.featuredPost span{font-size:10px}<br />.featuredPost p{font-family:droidkufi-bold, tahoma;font-size:10px}<br /><br /> 

1.   
2. ابحث عن</body> وضع قبله هذا الكود

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

  

ثم إبحث عن </head>وضع قبله الكود التالي

<script>/* Script from:http://gooplz.blogspot.com/ */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; numposts1 =22; label1 = "سلايدر2"; 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="612" height="260" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h22><a href="'+posturl+'">'+posttitle+'</a></h22><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }} </script> <br /> 

  

واخيرا ابحث عن الكود التالي<div id='main-wrapper'>و و ان لم تجده ايحث عن <div class='main-wrapper'> وان لم تجد الكودين ضع الكود التالي فوق رسائل المدونة لإلكترونية مباشرة 

الكود

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

  

واضضغط على حفظ

مبروك عليك السلايدر

اذا استفدت من التدوينة لاتبخل بنشرها على المسلمين 

By glok

Similiar tagsبلوجر