Cara Membuat Automatic Featured Posts Slider

Hay Broo..  kembali lagi dengan tutorial membuat featured posts slider,sebelumnya telah ada 7 tutorial membuat featured posts slider yang sudah saya posting diblog ini, fetured posts slider yang akan kita buat kali ini berbeda dengan pendahulu-pendahulu sebelumnya, kalau versi sebelumnya kita harus menambahkan images, link dan deskripsi posts secara manual maka featured posts slider kali ini akan otomatis mendekteksi recent posts blog ( postingan atau artikel terbaru blog ) bedasarkan label. T

Nah jika anda tertarik untuk membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:

1. Silahkan login ke akun blogger anda
2. Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut sebelum kode ]]></b:skin>
   
   

   #featured{margin:0;padding:10px 10px 0}
   .sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}
   .sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
   .pagination{text-align:right;padding:15px 0 10px}
   .pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}
   .pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}
   .featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
   .featuredPost a{color:#fff}
   .featuredPost a:hover{color:#dedde5}
   .featuredPost h2{font-size:12px;line-height:1;margin:0}
   .featuredPost span{font-size:10px}
   .featuredPost p{font-size:11px}

4. Catatan: Kode CSS diatas masih dapat anda modifikasi kembali, seperti merubah lebar featured posts, ukuran font ataupun warna agar sesuai dengan desain blog anda. 
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
5. Kemudian letakkan script JQuery berikut diatas kode </head>
   
   
   <script src='https://www.google.com/jsapi?key=ABQIAAAA2hx9d_4eShgrICEQXtat9RTVScYuS-PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ' type='text/javascript'/>
   <script>
   //<![CDATA[
   /* Script from:http://www.tipstrikblogging.com/ */
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNh5_1oLDdABCFexjPhAJttDD6jS5yIrQ0-sRuKiW7DWjoL1O0Cx0pCwcoC42QJFCwGvpwIvS6p9JpYfVtvXRA5ZK5-pP8QzxXN5JEQfx0syzRdBl-7JHHtLKQdBbg96zBFaiIOhXig8c/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 100;
   numposts1 = 6;
   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="350" height="270" 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>
   /* Script from:http://www.tipstrikblogging.com/ */
6. Selanjutnya tambahkan script berikut dibawah script JQuery
   
   
   <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>
7. Tambahkan pula script berikut diatas kode </body>
   
   
   
   <div id='featured'>
   <div class='sliderwrapper' id='slider1'>
   <script>
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
   </script>
   </div>
   <div class='pagination' id='paginate-slider1'>
   </div>
8. Langkah terakhir, tambahkan kode HTML berikut diatas <div id='main-wrapper'> jika anda ingin meletakkannya diatas kolom posting atau diatas <div id='sidebar-wrapper'> jika anda ingin meletakkannya diatas sidebar blog
9. Selesai dan lihat hasilnya diblog anda!
   Demikian tutorial cara membuat featured posts slider otomatis pada blog, semoga bermanfaat.