Membuat Konten Slider Images Otomatis

Ada banyak tutorial membuat konten slider di internet. Silahkan google dan cari. Dan disini saya akan memberikan hal yang saya lakukan saat membuat blog Agregasi Online kilaskareba.com atau kilaskareba.blogspot.com, sedangkan di blog ini belum saya lakukan dan masih berupa konten slider statik. :) 

1. Saya mencari template yang sesuai dan memilih Media Online yang didistribusikan oleh MyBloggerThemes.com.
2. Mulai mengisi blog dengan beberapa artikel/berita dan memasukkan label yang sesuai.
3. Mengganti Konten Slider statis yang ada menjadi otomatis

Langkah-langkahnya sebagai berikut.
Langkah pertama, Anda mesti login ke blogger dengan akun Anda

1. Pilih blog yang ingin anda tambahkan slider image ini.
2. Setelah itu masuk ke template >> Edit HTML
3. Sebaiknya backup dulu template anda untuk jaga-jaga jika ada kesalahan.
4. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #featuredContent{float:left;width:550px;margin-right:10px;display:inline}
   #featured-slider{position:relative;overflow:hidden;width:550px;height:310px}
   #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:550px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmrLj7Okyl5n2RBbqh0lrDY_Q_TkTHKlxVeVwmGs35K52IVwNJOKmxnQYCFXruVpD6-68amszggR9q7dLKb4WkYaQfvsaZk5aVW80UMAdLfpBcP6c2qTfnsA0y-qTbBELWVCK1PK7FIiuD/s1600/transparant.png)}
   #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
   #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
   #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
   #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
   #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
   #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
   #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
   #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
   Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
   
5. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjIziWkvjd18-GjTp28ZiNkKA0ZzWqCMG2vlcv69pB3CXX-f_tC8l624GEnkELKuSpP1HT_0Yt1BU493uVa_v-T7Q5CeDaBWfo_M_T8K52CGm6kF3P05ulbKf1zvAo1WNCpZ9Afve8vn8/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 100;
   summaryTitle = 25;
   
   numposts3 = 5;
   
   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 showrecentposts3(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts3; 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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="550" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
       document.write(trtd);
   
   
       j++;
   }
   
   }
   
   function showrecentposts4(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts3; 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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
       document.write(trtd);
   
       j++;
   }
   
   }
   
   //]]>
   </script>
   Keterangan :
   
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js yang digunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Warna biru : Jumlah post yang ditampilkan dalam slider
   Warna hijau : Panjang dan lebar image besar
   Warna merah tua : Panjang dan lebar image kecil
6. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   
   <div id='featuredContent'>
   <div class='sliderwrapper' id='featured-slider'>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/Islam?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
   </script>
   </div>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/Islam?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </ul>
   <div class='clear'></div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: "featured-slider", //id of main slider DIV
   contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
   toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
   nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
   revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[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>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
   

   script src=\"/feeds/posts/default/-/Islam?max-results

   dengan kode berikut :
   

   script src=\"/feeds/posts/default?max-results

7. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

8. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

Setelah meletakkan pada template atau melalu widget, saya kemudian menghapus script slider statis yang ada. Selamat mencoba dan semoga bermanfaat.

link sumber belajar saya untuk ini, http://www.maskolis.com/2012/04/membuat-content-slider-image-otomatis.html