Membuat Efek Zoom Pada Gambar
Membuat Efek Zoom Pada Gambar
Lama nian saya tidak posting dan update ini blog. Karena begitu padatnya pekerjaan di dunia offline mengharuskan saya harus banting tulang untuk mengejar target dan melaksanakan tugas yang diberikan si boss, hehehee.
Insya Allah, mulai sekarang atau mulai minggu ini saya akan kembali update blog, blogwalking dan mengobok-obok blog sobat minimal saya akan ninggalin jejak kaki saya dipostingan sobat.
Mungkin sobat semua pernah nemu sebuah blog yang mempunyai keunikan pada gambar di postingan atau disidebar. Dimana apabila mouse diarahkan kegambar tersebut secara otomatis akan menjadi besar atau dalam istilahnya efek zoom pada gambar. Ini merupakan salah satu trik untuk Mempercantik Blog kita.
Kalau masih bingung ini contohnya ;
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. (begichu lho....)
Jangan lupa Simpan Template.
Apabila sobat ingin menggunakan affek zoom pada gambar ini, silahkan menggunakan kode gambar seperti ini ;
Sedangkan kode HTMl untuk TEXT adalah sebagai berikut :
Coba di sorot (Lihat Gambar) tulisan berwarna merah dibawah ini :
Catatan:
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. Salam Blogger Indonesia.
Insya Allah, mulai sekarang atau mulai minggu ini saya akan kembali update blog, blogwalking dan mengobok-obok blog sobat minimal saya akan ninggalin jejak kaki saya dipostingan sobat.
Mungkin sobat semua pernah nemu sebuah blog yang mempunyai keunikan pada gambar di postingan atau disidebar. Dimana apabila mouse diarahkan kegambar tersebut secara otomatis akan menjadi besar atau dalam istilahnya efek zoom pada gambar. Ini merupakan salah satu trik untuk Mempercantik Blog kita.
Kalau masih bingung ini contohnya ;
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. (begichu lho....)
1. Silahkan login ke Bloggerterlebih 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}
.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="Photobucket"><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">Lihat Gambar<span><img src= http://i648.photobucket.com/albums/uu204/puter4/TESTtatobelakangcopy.jpg /></span></a>
Coba di sorot (Lihat Gambar) tulisan berwarna merah dibawah ini :
Catatan:
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. Salam Blogger Indonesia.
Posting Komentar