Cara membuat slider Carousel otomatis berdasarkan label?

Dalam tutorial ini saya akan membahas cara membuat slider Carousel otomatis berdasarkan label Anda di blogger. Yang harus Anda lakukan hanya mengganti dengan label sendiri dan slider akan bekerja berdasarkan label yang Anda tambahkan pada template Edit HTML. Saya membuat slider korsel ini sangat sederhana dan hanya menggunakan script jCarousellite tanpa menambahkan efek mengurangi atau roda mouse.

1. Anda harus login ke blogger dengan account Anda
2. Setelah itu pilih blog Anda yang ingin ditambahkan slider.
3. Pergi ke Template >> Edit HTML dan centang expand template widget, jangan lupa untuk membackup template anda terlebih dahulu.
4. Dan kemudian tempat kode berikut ini di atas ]]></b:skin>:
   
   #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1oUc1TPBEIX32YUZoUMhcDx2iNXf0a5fZ38bSPDF5ArTAFHikyKyD3H_YAOCyTLGp95LFQzefj-KMGO40d3vIXO_kSUzXqTrL9ApYZpKg1vSYMF-kt_YSYNcgr1qKGdf56vSy3QfGV1M/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV7o7jFLdmQP13jb-onC2vtAEbj1A5WBNDVOLmyxr9qsxc546RINguq15TVy10iYHML3yjxKXGseFYZ6gUhQ7iafmrHfemdKcEDW6kdra7z1iw_tkNw84cCOkRlj6QQ7W9V3oPKNTxhFU/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidU6qTrN6Qsz1tcqxdhKCnyOHbSZm6TVif_72cDG-_sF6FTejzCrl7SLB51Bq80N0hLqWO3sX7QZnudH34VkcW3AZ6CQJ89RCUmBIbZ2qeXW08ufS7ZJeTXXEhAk2WJLyyfk3Q8jFHgDE/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWCZieIgsJ3bqqkAzG4pScg5hbMi3Tgs5yeNERLYIKwbpJ4v64r7rGNH8Nk2bXUW2Dm5ZzdhZh6GmMW6PyGYBAAxG54sasdXBSpNntqZe3POSktcAKrYqY7KoIFPBHU6OEa9HSgpeCqkk/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic4LTHqr812e8DtB8-ItmTU8ofWkyDu5wfBxmcOgSS1LL1t6RgbuVYUb5oiAdG0Gz9OYkeWzkfOhKykejvPmEB3aP32zrE4uMnuSKAnVf-7REhipK3ylFZA7qPQZfojHuo2tblmarK3CQ/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGohjkCqUIK-752qjXUIobS6TsKJS2neogUVZMGPseZR0RVIup5wisjlB9jlPuCLvhaHJQr3yqfvC_Idl5wzCDckX-7ntfai8ECqANWKbShjksxaWxrdWb38FhaXtKookvJ0Hu1HSWrqo/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #carousel a img{display:block;background:#fff;margin-top:0}
   Lihatlah beberapa kode dengan warna biru di atas, itu lebar dan tinggi slider dalam demo yang saya buat, ubahlah sesuai dengan ukuran Anda sendiri tergantung pada lebar template Anda.
5. Masih di Edit HTML, tambahkan kode berikut di atas </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrWoN6dC90CN8p5i8up4FTdmPthJT8P0mS3dlCAZXFXQR0DCZ3SS2JNi-zdeoMF4o46MRLDdn2XxZ8j5DJxC_S7exCqpQjTxdYti97rD1AqFbfoXpFxWk8f5MQzDf8ZU77Tm9qDburMxI/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   
   numposts1 = 15;
   label1 = "news";
   
   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 showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<ul>');
   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;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

   
   document.write(trtd);
   j++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
   Catatan:
   
   Lihat script URL merah di atas, itu seri terbaru jQuery.min.js skrip kode yang saya gunakan untuk membuat slider ini. Dan jika Anda telah menemukan jQuery.min.js meskipun dengan seri berbeda dalam template Anda, kode merah tidak perlu lagi dimasukkan. Harus ada hanya satu jQuery.min.js dalam template Anda.
   
   Biru kode (15): jumlah posting Anda yang akan ditampilkan pada slider. berita adalah label yang saya pilih untuk dimuncul dalam slider.
6. Langkah selanjutnya Anda harus memanggil slider muncul di blog Anda. Tempatkan kode berikut ini di atas <div id='main-wrapper'>:
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <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=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Anda juga dapat menempatkan kode di atas pada bagian bawah menu navigasi Anda atau Anda juga dapat menempatkan di sisi footer, itu tergantung pada kebutuhan Anda.
7. Langkah terakhir, simpan template dan lihat hasilnya.