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 :
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 ]]></b:skin> (yang berwarna merah)
Ok, selamat berkarya dan semoga berhasil. Salam tersembunyi.
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 :
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 ]]></b:skin> (yang berwarna merah)
Ok, selamat berkarya dan semoga berhasil. Salam tersembunyi.
No comments:
Post a Comment
Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :
» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi
Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".
Sebelumnya vito minta maaf yg sebesar"nya jika komentar anda belum sempat dibales. ^^