Cara Membuat Thumbnail Slideshow Horizontal di Blog

Kali ini saya akan berbagi ilmu yang berhubungan dengan tutorial blog, yaitu Cara Membuat Thumbnail (gambar kecil) Slideshow Horizontal dengan fungsi tombol geser di Blog, seperti di blog saya ini.

Sebenarnya banyak cara mengoptimalkan tampilan blog kita, dari menambah recent post slideshow dan juga membuat auto read more, ada satu lagi yaitu Membuat Widget 2 Kolom Sejajar (kanan dan kiri) dibawah Header. Nah..untuk menambah optimasi tampilan blog kita maka saya akan tambahkan tutorial Membuat Thumbnail (gambar kecil) Slideshow Horizontal dengan fungsi tombol geser. Caranya cukup simple kok..

Langkah-langkah yang harus kita kerjakan adalah sebagai berikut :

1. Login ke akun Blogger anda
2. Klik Rancangan kemudian klik Elemen halaman
3. Klik Tambah Gadget
4. Pilih tamabah HTML/Javascript
5. Terakhir masukan kode dibawah ini dan simpan. Lihat hasilnya,,
   
   
   <style>
   /* Elastislide Style */
   .es-carousel-wrapper{ background: #101010; padding:10px 37px; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; position:relative;}
   .es-carousel{ overflow:hidden; background:#000;}
   .es-carousel ul{ display:none;}
   .es-carousel ul li{ height:100%; float:left; display:block;}
   .es-carousel ul li a{ display:block; border-style:solid; border-color:#222;}
   .es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%;}
   .es-nav span{ position:absolute; top:50%; left:12px; background:transparent url(http://3.bp.blogspot.com/-C2VgY35Z-Cg/T0pFL1jGQMI/AAAAAAAAAmw/OWe5BvaFDfA/s1600/nav.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px;
   cursor:pointer; opacity:0.8;}
   .es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right;}
   .es-nav span:hover{ opacity:1.0;}
   </style>
   <div class="es-carousel-wrapper" id="carousel">
   <div class="es-carousel">
   <ul>
   <li>
   <a href="URL OF THE PAGE">
   <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
   <tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSSatHbiHl5qVeQmIy8lyo5wIZK4RuDdE4NSQMMFId6NivDnRlZBny8fuegEpT1n-35kmh6igD_aAxaR_xFSv1BCAD9qRyIAq_xwQQzfrBhzRe9Z5Enj9JoswLPjAasq3mXK9dYsIjqeFj/s1600/bubble-safari.jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
   <tr style="color: white;"><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
   </tbody></table>
   </a>
   </li>
   </ul>
   </div></div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
   </script>
   <script src="http://blogtipsntricks.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">
   </script>
   <script src="http://blogtipsntricks.googlecode.com/files/jquery.elastislide.js" type="text/javascript">
   </script>
   <script type="text/javascript">
   $('#carousel').elastislide({
   imageW : 180,
   minItems : 5
   });
   </script>

Informasi Tambahan :

• Ganti kode warna PURPLE dengan kode warna kesukaan anda
• Ganti tulisan berwarna MERAH dengan URL OF THE PAGE milik anda
• Ganti URL yang berwarna BIRU dengan URL gambar milik anda
• Ganti angka 5 yang berwarna HIJAU sesuai keinginan anda (angka 5 menunjukan jumlah gambar yang terlihat, tapi jumlah gambar yang akan tampil harus disesuaikan dengan lebar halam anda)

NOTE :
Bagi template blog yang sudah terpasang slide seperti recent post slide maka fungsi tombol geser di Thumbnail Slideshow Horizontal tidak akan berfungsi, jadi anda harus memasang salah satunya saja.