1 Cara Membuat Thumbnail Slideshow Horizontal Diblog Keren

cara membuat thumbnail slideshow horizontal diblog keren

~sebenarnya banyak cara untuk meoptimalkan tampilan blog kita salah satunya yaitu memasang thumbnail recent post geser di blog kita. berikut langkah-langkah untuk memasang widgetnya.
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. stelah kotaknya terbuka, masukan kode dibawah ini dan simpan. kemudian 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/AVvXsEhxVpej8DKh5g6EQB0iACjeojED_Pd9f9JdM8mbzRUekoVEscy0C7rj-2xIrqqKrF-y4je5Z2mgiMehX92Ta6o_QZzjIaHt5SzkjbggyKF_Kc-c_ZPCEmyNMCvmlFgiBF16fOvX4mP8puMc/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 Scriptnya :

1. Ganti kode warna Hijau dengan kode warna kesukaan anda
2. Ganti tulisan berwarna Biru dengan URL OF THE PAGE milik anda
3. Ganti URL yang berwarna Merah dengan URL gambar milik anda
4. Ganti angka 5 yang berwarna Pink sesuai keinginan anda (angka 5 menunjukan jumlah gambar yang terlihat, tapi jumlah gambar yang akan tampil harus disesuaikan dengan lebar halam anda)

NB : Bagi blog yang sudah memiliki slide show recent post seperti thumbnail geser, maka widget ini tidak akan berfungsi.