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^[1] dengan fungsi tombol geser di Blog, seperti di blog saya ini.

Sebenarnya banyak cara mengoptimalkan tampilan blog kita, dari menambah recent post slideshow^[2] dan juga membuat auto read more^[3], ada satu lagi yaitu Membuat Widget 2 Kolom Sejajar (kanan dan kiri) dibawah Header^[4]. Nah..untuk menambah optimasi tampilan blog kita maka saya akan tambahkan tutorial Membuat Thumbnail (gambar kecil) Slideshow Horizontal dengan fungsi tombol geser^[5]. 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/AVvXsEju0_fq81oB0tXTjFkwgs4eoTVB2lemZ6V-IzQLChuYANs0Zm0O5cdB0Kltrz6Ae4yIQuXMhsu9aTYH-abgMkYtoA0XPu6P9z_ot9Uh7VxupVkPVo5ENhjnDf-eQSmiUyQnpK1SFsd35NDo/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^[6] maka fungsi tombol geser di Thumbnail Slideshow Horizontal^[7] tidak akan berfungsi, jadi anda harus memasang salah satunya saja.

References

1. ^{^} Cara Membuat Thumbnail (gambar kecil) Slideshow Horizontal (gamebloginf.blogspot.com)
2. ^{^} recent post slideshow (gamebloginf.blogspot.com)
3. ^{^} membuat auto read more (gamebloginf.blogspot.com)
4. ^{^} Membuat Widget 2 Kolom Sejajar (kanan dan kiri) dibawah Header (gamebloginf.blogspot.com)
5. ^{^} Membuat Thumbnail (gambar kecil) Slideshow Horizontal dengan fungsi tombol geser (gamebloginf.blogspot.com)
6. ^{^} recent post slide (gamebloginf.blogspot.com)
7. ^{^} Thumbnail Slideshow Horizontal (gamebloginf.blogspot.com)