Efek ZOOM

langsung az mas bajoel Disini g akan banyak cakap kawan - kawan blogger pernah liat g yg seperti ini...... arah kan Mouse ke gambar

Arahkan mouse ke tulisan...

Lihat Gambar

untuk Caranya Bisa lihat disini.....

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}


Untuk kode dengan Gambar

<a class="thumbnail" href="#thumb"><img src="http://i586.photobucket.com/albums/ss303/adhit_ku/avatarku.jpg" border="0" alt="Photobucket"><span><img src="http://i586.photobucket.com/albums/ss303/adhit_ku/avatarku.jpg" width ="400px" height="472px";/></span></a>

Sedangkan kode HTMl untuk TEXT adalah sebagai berikut :

<a class="thumbnail" href="#thumb">Lihat Gambar<span><img src= http://i586.photobucket.com/albums/ss303/adhit_ku/avatarku.jpg /></span></a>

Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.

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)

Ok, selamat berkarya dan semoga berhasil