سلايد شو ذاتي التشغيل خفيف ومميز Slideshow

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

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

الآن سأشرح لكم طريقة إضافة سلايد شو جميل ومميز ويمكنك التحكم في حجمه كما تشاء 

صورة للسلايد شو

لتركيب السلايد شو إتبع الخطوات التالية 

اولا إبحث عن

 ]]></b:skin>

ثم فوقه ضع هذا الكود

 #featured{margin-bottom:8px} .sliderwrapper{position: relative;overflow: hidden;height: 240px} .sliderwrapper .contentdiv{visibility: hidden;position: absolute;right: 0;top: 0;padding: 0px;height: 100%;} .pagination{text-align: right;padding:8px 0px} .pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6} .pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352} .featuredPost{width:630px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0} .featuredPost a{color:#fff} .featuredPost a:hover{color:#dedde5} .featuredPost h2{margin:0;font-size:12px;line-height:1} .featuredPost span{font-size:10px} .featuredPost p{font-size:11px}

630 خاصة بعرض الخلفية السوداء الشفافة التي يضهر فيها جزء من الموضوع

ثم إبحث عن 

 </head>

ثم فوقه ضع هذا الكود

 <script> //<![CDATA[ /* Script from:http://simplexdesign.blogspot.com/ */ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZn6pi-4vg1XFm_DksKEVE2F5EhoA16En4yJeVrKeo0UiO9lsiFRb8E7ezGded-AWs5wT88fhqI2fSmKul5l8KenekT8Xa12drTgf4ZZy1TkrrEzMKFICdrst-RIurfI0bYKqhnG4FhU/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 100; numposts1 = 5; 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=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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="650" height="240" 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++; }} //]]>

650 خاصة بعرض السلايد شو يجب أن يكون اكبر من القيمة ب 20 التي اعطيتكم فوق وهي 630

ثم 240 خاصة بطول السلايد شو
ثم غير "عين العرب" باسم الفئة التي تريد إضهارها في السلايد شو

بعد ذالك إبحث عن 

 </body>

ثم فوقه ضع هذا الكود

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

 

قد تجد مشكلة اثناء نسخ الاكواد لذالك وضعت لكم ملفا يحمل جميع الاكواد ما عليك سوى تحميله واتباع الخطوات الموجودة في هذا الموضوع

حمل الملف من هنــــــــــــــــــــــــــــــــــا

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

موفقين إن شاء الله