Cara Membuat Efek Zoom di Blog

Dari judulnya, anda mungkin sudah mengerti maksudnya.
Ya anda benar, sesuai namanya zoom itu berarti diper-
besar. Bahasa gamblangnya, sesuatu yang dalam hal ini
adalah gambar yang aslinya bentuk ukurannya kecil
takkala terlintas cursor pointer di atasnya maka gambar
tersebut akan berubah menjadi lebih besar ukurannya
dari ukurannya semula. Untuk lebih jelas lagi, coba saja
anda letakkan cursor anda tepat berada di atas gambar
wanita cantik di bawah ini.



Coba juga letakkan cursor anda di atas tulisan yang
'Berwarna Biru' yang ada di bawah ini dan coba anda
perhatikan apa yang terjadi dengan tulisan tersebut ?

LIHAT GAMBAR INI

Nah, itu yang dimaksud dengan efek zoom yang kita
bicarakan pada kesempatan kali ini.

Coba saja deh efek zoom ini anda terapkan di blog
anda, selain dapat menghemat ruang, efek ini juga
bisa memperindah penampilan blog kita. Makanya
kalau anda mau coba, ikutilah petunjuk ini :

1.   Silahkan login ke Blog anda.
2.   Di area Dasbor klik Edit HTML.
3.   Centang Expand Template Widget.
4.   Sebelum melanjukan, copy dahulu kode css
      yang tertera di bawah ini :

/* 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:1;padding:2px}
.thumbnail:hover span {visibility: visible; top: 0; left: 50px}

5.   Letakkan kode css tersebut, di atas kode ]]></b:skin>
6.   Simpan template anda.
7.   Siapkan gambar yang akan anda beri efek zoom,
      upload ke web hosting anda dan copy kode
8.   Copy juga kode berikut ini dan tempatkan di tempat
      yang anda inginkan, di sidebar atau bisa juga pada
      postingan anda.

►  KODE HTML UNTUK GAMBAR ZOOM :

<a class="thumbnail" href="http://www.blogger.com/post-edit.g?blogID=8287053043450086996&amp;postID=1711738123524367907#thumb"><img alt="Photobucket" border="0" src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_100.jpg" /><img ;="" height="236px" src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_100.jpg" width="200px" /></a></div>

►  KODE HTML UNTUK TEKS ZOOM :

<a class="thumbnail" href="http://www.blogger.com/post-edit.g?blogID=8287053043450086996&amp;postID=1711738123524367907#thumb">LIHAT GAMBAR INI<img src="http://i1128.photobucket.com/albums/m486/syamsudin1/zoom_200.jpg" /></a>

9.   Silahkan anda pratinjau dahulu.
      Selesai.

■   CATATAN :

•    Ganti url gamrbar dengan url gambar milik anda.
•    Rubah ukuran gambar zoom (width dan height) nya
     sesuka hati anda.
•    Sedangkan untuk merubah letak/posisi gambar zoom
      nya, anda rubah pada kode yang anda letakkan
      di atas ]]></b:skin> tadi.

♥   Semoga anda berhasil.
     Selalu Good luck!