Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara anda tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.
Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang anda miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer anda dulu, plus kopi dan rokok sebagai pelengkap. 
1. Silahkan login ke Blogger terlebih dahulu.
2. Kemudian klik Rancangan.
3. Tuju halaman Edit HTML.
4. Letakkan kode css berikut ini, tepat diatas / sebelum kode ]]>
/* Zoom Efek */
.thumbnail{position:relative;z-index:0}
.thumbnail:hover{background-color:transparent;z-index:50}
.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}
.thumbnail span img{border-width:0;padding:2px}
.thumbnail:hover span {visibility: visible;top: 0;left: 60px}
5. Jangan lupa Simpan Template.
Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :
Kemudian hapus tulisan yang berwarna Biru, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :
width="380px" height="300px";/>
coba sekarang sobat sorot gambar dibawah ini :
Sedangkan kode HTMl untuk text adalah sebagai berikut :
Contoh Gambar
Coba di sorot tulisan berwarna Biru dibawah ini :
Contoh Gambar
Ukuran besarnya gambar yang akan di zoom silahkan anda atur sesuai keinginan, silahkan ganti yang berwarna Biru dengan ukuran yang anda inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob,
