Membuat Efek Zoom Image di Postingan Blog

Para Blogger sekalian kali ini saya aka membahas tentang Efek Zoom Image.
Udah tau kan apa itu Efek Zoom Image ???
Efek Zoom Image yaitu efek yang membuat gambar di postingan menjadi lebih besar bila dilewati kursor.
Langsung aja ane bahas cara-caranya.
1. Masuk dulu ke akun Blogger sobat. Klik LogIn bagi yang belum masuk.
2. Masuk ke Rancangan lalu pilih Edit HTML.
3. Cari kode seperti ini    ]]></b:skin>
4. Lalu sisipkan kode ini tepat diatas kode tadi.

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: #7AA1C3;
padding: 0px;
left: -1000px;
border: 1px solid gray;
visibility: hidden;
color: white;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 0px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 5px;
}

5. klik Simpan atau Save.
6. Kemudian Pilih Posting lalu pilih New Entri.
7. Buat postingan seperti biasa, tapi setiap kali sobat menambahkan gambar cukup masukkan kode ini :
<a class="thumbnail" href="">
<img src="Masukkan alamat/URL gambar anda" width="100px" height="100px" border="0px" /><span><img src="Masukkan alamat/URL gambar anda disini" /><br /> Deskripsi gambar anda disini </span>
</a>
8.Ubah dan Sesuaikan kode warna biru.
9. Selesai.
contoh :


Space Iklan


Mudah kan gan. Semoga trik kali ini bermanfaat buat agan sekalian.
Happy Blogging.