تركيب سلايدشو بمدونة بلوجر بكل سهولة بدون اخطاء وخفيف على المدونة والا يسبب اى ثقل للمتصفح ميزة السلايدر يعرض لك صورة مصغرة مناسبة حتى لا يتم تشوة شكل المدونة وبجانب الصورة عنوان الموضوع والتاريخ ومقتطف من الموضوع وخاصية الارقام لعرض المواضيع والأجمل من ذلك ان تضع قسم محدد بداخل السلايدر ويتميز بالسرعة لن اطيل عليكم بالكلام فالتجربة خير دليل البرهان .
صورة لشكل السلايدر
كيفية تركيب سلايد شو :
قبل اضافة اى اكواد يجب اخذ نسخة احتياطية قبل وضع اى اكواد ومن هنا درس بسيط يعلمك طريقة اخذ نسخة احتياطية الان ناتى الى الطريقة فى البداية ادخل الى لوحة تحكم مدونتك ومن بعدها اضغط على القالب الأن اضغط على تحرير 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 = 100;numposts1 =17;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;}elseif ("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>
ملحوظة :
قم بتغير كلمة دروس بلوجر الى القسم الذى يناسبك المحدد باللون الأصفر
قم بتغير رقم 17المحدد باللون الأخضر الى الرقم الذى تريدة وهو عدد عرض المواضيع
الأن قم بالبحث مرة اخرى عن هذا الكود :
</body>
ضع فوقة مباشرة هذا الكود :
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'></script><script>featuredcontentslider.init({id: "slider1", //id of main slider DIVcontentsource: ["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='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>
بالأخير قم بحفظ التغيرات وانتهى التركيب وستجد الاضافة تعمل معك بدون اى اخطاء وارجو بأن هذه الاضافة اعجبتكم وانتظرونى بأضافة اخرى جديدة (( لا خير فى كاتم العلم ))
ليست هناك تعليقات:
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )