Membuat Efek Zoom Pada Gambar di blog

I

ni merupakan salah satu trik untuk Mempercantik Blog kita.

Biasanya cara ini dpergunakan untuk menyiasati penghematan tempat apabila kita harus menggunakan ukuran gambar yang besar. Dengan cara ini gambar bisa kita perkecil sesuai dengan kolom postingan, kemudian apabila pembaca ingin melihat ukuran yang sebenarnya tinggal mengarahkan mouse saja ke gambar tersebut.

Berikut adalah cara memasang-nya pada blog...

ikuti langkah-langkah berikut.?

1. Silahkan login ke Blogger  terlebih dahulu.
2. Kemudian klik Tata Letak.
3. Edit HTML.
4. Letakkan kode css berikut ini, tepat diatas kode ]]></b:skin>

/* 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}

Jangan lupa Simpan Template.

Apabila sobat ingin menggunakan affek zoom pada gambar ini, 

silahkan menggunakan kode gambar seperti ini ;

<a class="thumbnail" href="#thumb">
<img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" border="0" alt="uc1n"><span><img src="http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg" width ="400px" height="472px";/></span>
</a>

Sedangkan kode HTMl untuk TEXT adalah sebagai berikut :

<a class="thumbnail" href="#thumb">
<img src= http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg />
</a>

Catatan:
Rubah ukuran gambar yang di inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.
warna biru adalah URL gambar
Sedangkan untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode yang diletakkan di atas ]]></b:skin> (yang berwarna merah)