Membuat Auto Image Slider Content di Blogger

Auto Image Slider Content adalah sebuah slide show untuk memuat setiap slide secara otomatis berdasarkan artikel/posting terbaru yang diterbitkan, jadi tidak usah secara manual untuk menampilkan slide-slide yang ada dalam blog, khususnya yang ada gambarnya. Banyak jenis dari Auto Image Slider Content ini, namun kali ini saya akan menjelaskan yang sederhana saja. Berikut ini langkah-langkahnya :

1. Login ke blogger kamu, lalu masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan.
   
2. Temukan kode ini: ]]></b:skin> kemudian salin kode di bawah ini dan letakkan di atasnya.
   

   /* Auto Slide */
   #slide-wrapper{background:#f5f5f5; border:1px solid #ccc; margin:0 0 15px 0; padding:10px 0 10px 0; width:295px; border-radius:6px; -o-border-radius:6px; -moz-border-radius:6px; -khtml-border-radius:6px; -webkit-border-radius:6px}
   #postslide{height:275px; margin:auto; position:relative; width:275px}
   #postslideContent{position:absolute; top:0; width:273px}
   .postslideImage{display:none; padding:0px; background:#fff; float:left; position:relative}
   .postslideImage span{background-color:#000; color:#fff; display:none; filter:alpha(opacity=70); -moz-opacity:0.7; -khtml-opacity:0.7; opacity:0.7; font-size:14px; left:0; bottom:0; padding:10px 10px 10px 10px; position:absolute; width:255px}
   .postslideImage span p{font-size:12px; line-height:1.6em; padding:8px 8px 0 0}
   .postslideImage a:link,
   .postslideImage a:visited,
   .postslideImage a:hover{color:#fff}

   
   
3. Temukan kode ini: </body> kemudian salin kode di bawah ini dan letakkan di atasnya.
   

   <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
   <script src='http://files.javatemplates.com/js/s3slider.min.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   $(document).ready(function() {
   $('#postslide').postslide({
   timeOut: 3000});
   });
   //]]>
   </script>

   
   
4. Klik Preview, jika tidak ada error maka klik Simpan.
5. Langkah selanjutnya, masuk ke menu Tata Letak kemudian klik Add Widget sesuai letak yang diinginkan lalu tambahkan HTML/JavaScript dan paste kode di bawah ini kedalam HTML/JavaScript tersebut :
   

   <div id="slide-wrapper">
   <div id="postslide">
   <script type="text/javascript">
   imgr = new Array();
   imgr[0] = "/noimage.png";
   showRandomImg = true;
   imgwidth = 250;
   imgheight = 260;
   summaryPost = 10;
   startpost = 1;
   numposts = 500;
   home_page = "http://eruitshirt.blogspot.com/";
   </script>
   <script src="http://files.javatemplates.com/js/auto.s3slider-content.min.js" type="text/javascript">
   </script>
   </div>
   </div>

   
   
6. Langkah terakhir, ganti alamat blog http://eruitshirt.blogspot.com sesuai dengan blog yang anda inginkan.

Hasilnya seperti slider yang ada disamping.

Semoga bermanfaat.