السلام عليكم ورحمة الله سلايد شو جديد من مدونة anis tetche blog سلايد شو افقى احترافى تلقائى يعرض اخر المواضيع فى مدونتك او موقعك السلايد تصميم بسيط وانيق وسريع وسهل التركيب فى اى مدونه يمكنك استخدام السلايد سو فى جميع تحصوصات وفى جميع المجالات ويمكنك معاينة السلايد شو من الرابط التالى .
شرح التركيب
1- قم باخذ نسخة احتياطية من قالب مدونتك لعدم حدث اى مشاكل.
2- قم بالبحث فى قالب مدونتك عن الوسم ]]></b:skin> ثم قم بوضع الكود التالى فوقه / قبلة.
#featured-wrap{ background: #212121; position: relative; height: 234px; margin: 0 auto; } #featured{position: relative; width: 92.5%; height: 215px; overflow: hidden; top: 13px; margin: 0 auto; } #featured ul{width:9999px} #featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden} #featured li{ width: 300px; display: inline-block; float: left; height: 200px; } .thumb-featured{ width: 262px; margin: 5px auto; overflow: hidden; border: 8px solid #F2F2F2; display: inline-block; border-radius: 7px; height: 178px; } .thumb-featured img{ width: 269px; height: 140px; } .title-featured { text-align: center; position: relative; margin-top: -65px; background-color: rgba(184, 37, 37, 1); padding: 11px; margin-right: 8px; margin-left: 30px; font-size: 11px; height: 23px; } .title-featured h4{font-size:90%;max-height:45px;overflow:hidden} .arrow{position:absolute;display:block;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiiJUU8cUKyfbcFFUOjKubpNsq5wGflsMaWrS3qfLtKkvHKrsuBC5P_rZnQyeATXzNo0n5lYrPP9v288Et7CIj_GktpGyL9wtyCb0DIggaQoXW5vU5-Wm0ONJR_kMRUiLAgzia8DOr6Zg/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset} .arrow.back{background-position:0 50%;left:10px;display: none;} .arrow.forward{background-position:100% 50%;right:10px; display: none;} span.slideloading{background-image:url();background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto} .datex { display: none; } a { text-decoration: none; color: #FFF; }
3- قم بالبحث فى قالب مدونتك عن الوسم </head> ثم قم بوضع الكود التالى فوقه / قبله.
<script src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js' type='text/javascript'/> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhos_HOHJ0s1D7nGuk-jhsLKvG-lH3cGVBFPHpcSSkwfiicw2p3wU8rtC-zzPkUiIj6Ll5xylw8WrhKwIusoxkHPt3_SOluQM5_VB5-FRUMcBXXjqJSvTOdVbM0cIArrGfc3KAjqbo-Unw/s400/noimage.png"; var maxresults=12; var splittercolor="#d4eaf2"; var relatedpoststitle="شاهد المزيد"; imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvshWPwG8yU6GkQI83GHjmEFSCMAcqEeNUzb_cbA-voTrNv9PRA4dkSpZlWdi0RrK8h1IVKETGD4-WZ2pUDPqI34HTIx5sMCtsyEJjuPz6YyeJreDj-BwMno967AJdwjJUNioBC55D5pw/s500/No_image.gif"; showRandomImg = true; aBold = true; summaryPost = 150; summaryTitle = 25; numposts1 = 15; label1 = "القسم"; </script> <script type='text/javascript'> //<![CDATA[ //Script by Aneesh of www.bloggerplugins.org //Released on August 19th August 2009 var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; try {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;} catch (error){ s=entry.content.$t;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!="")) {thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhos_HOHJ0s1D7nGuk-jhsLKvG-lH3cGVBFPHpcSSkwfiicw2p3wU8rtC-zzPkUiIj6Ll5xylw8WrhKwIusoxkHPt3_SOluQM5_VB5-FRUMcBXXjqJSvTOdVbM0cIArrGfc3KAjqbo-Unw/s400/noimage.png";} } if(relatedTitles[relatedTitlesNum].length>42) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"..."; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; } } } } function removeRelatedDuplicates_thumbs() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp3.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3[tmp3.length - 1] = thumburl[i]; } } relatedTitles = tmp2; relatedUrls = tmp; thumburl=tmp3; } function contains_thumbs(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels_thumbs(current) { var splitbarcolor; if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2"; for(var i = 0; i < relatedUrls.length; i++) { if((relatedUrls[i]==current)||(!relatedTitles[i])) { relatedUrls.splice(i,1); relatedTitles.splice(i,1); thumburl.splice(i,1); i--; } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>'); document.write('<div style="clear: both;"/>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<a style="text-decoration:none;padding:5px;float:left;'); if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"'); else document.write('"'); document.write(' href="' + relatedUrls[r] + '"><img style="width:125px;height:125px;padding:0;border:solid 1px #eaeaea;margin-left:10px;" src="'+thumburl[r]+'"/><br/><div style="width:125px;padding-left:10px;height:35px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>'); i++; if (r < relatedTitles.length - 1) { r++; } else { r = 0; } } document.write('</div>'); relatedUrls.splice(0,relatedUrls.length); thumburl.splice(0,thumburl.length); relatedTitles.splice(0,relatedTitles.length); } //]]> </script>
4- الان مع الكود الخاص باظهار السلايد شو فى المكان الذى تريده يمكنك وضعه اسفل القائمة الرئيسية فى مدونتك.
<div id='featured-wrap'> <div id='featured'> <span class='slideloading'>Loading...</span> </div> </div>
6- قم بحفظ القالب ومبروك عليك السلايد شو .
وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)