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....)
1. Silahkan login ke Blogger terlebih dahulu.
2. Kemudian klik Tata Letak.
3. Edit HTML.
4. Letakkan kode css berikut ini, tepat diatas kode ]]>
/* 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 ;
Sedangkan kode HTMl untuk
TEXT adalah sebagai berikut :
Coba di sorot
(Lihat Gambar) tulisan berwarna
merah dibawah ini :
Lihat Gambar
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
]]> (yang berwarna
merah)
Ok, selamat berkarya dan semoga berhasil. Salam Blogger Indonesia.