TUTORIAL MEMBUAT EFEK ZOOM GAMBAR DI BLOG

Mungkin agan semua pernah menemukan sebuah blog yang dimana pada blog tersebut agan melihat sebuah keunikan pada gambar dipostingan atau disidebar tersebut. Dimana apabila mouse agan letakkan kearah gambar kemudian gambar tersebut secara otomatis akan menjadi besar atau dalam istilahnya Efek Zoom pada gambar.
Nah kali ini ane akan share salah satu trik Efek Zoom pada gambar untuk mempercantik blog kita (hehe..)

Ini adalah contoh efek zoom pada blog ane !!!

Dari contoh diatas dapat agan lihat efek zoom gambar pada blog ane, biasanya cara ini digunakan oleh banyak orang untuk mensiasati penghematan tempat apabila ukuran gambar yang kita gunakan terlalu besar. Nah dengan cara ini gambar bisa kita perkecil sesuai dengan kolom postingan, kemudian apabila agan ingin melihat ukuran yang sebenarnya, agan tinggal mengarahkan mouse / klik kiri pada gambar yang ingin agan perbesar tersebut.

Lanjut saja ke langkah langkahnya :

     1. Agan login ke Blogger terlebih dahulu
     2. Kemudian klik Template

     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}

     5. Klik Simpan Template

Itulah tahapan-tahapan bagaimana membuat Efek Zoom pada gambar di blogger, jangan lupa tinggalkan komentarnya ya gan, semoga bermanfaat...