membuat Zoom efek gambar di blog

Kadang-kadang kita tidak puas untuk melihat gambar di blog kita yang ukurannya kecil, kalau kita membuat gambar ukuran besar sungguh memakan tempat di dalam kolom postingan dan juga kelihatan juga tidak menarik. namun sekarang untuk mengatasi permasalahan seperti itu dalam postingan kali ini kasloh mencoba memberi solusi masalah gambar tersebut, yakni membuat gambar membesat ketika disorot oleh cursor.
langkah untuk membuatnya sebagai berikut :

* Terlebih dahulu anda sign in ke blogger.

* Kemudian Pilih Rancangan

* Setelah itu anda pilih Edit HTML

* Cari Kode ]]> setelah ketemu kemudian anda Paste kode dibawah ini sebelum kode tersebut



/* 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 Di save.

Berikutnya anda edit gambar anda di dalam postingan
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 yang berkedip dibawah ini :

Lihat Gambar

Catatan:
Sobat tinggal merubah ukuran gambar yang sobat inginkan, tinggal mengganti angka di width dan heigh sesuai dengan selera.
oya text yang abangs beri warna biru adalah link gambar, silahkan ganti dengan link gambar sobat yang mau sobat posting
Sedangkan untuk mengatur letak tinggi dan rendah gambar hasil zoom, sobat bisa merubah ukuran pada kode yang diletakkan di atas ]]> (yang abangs cetak tebal

contoh : abangs pake angka top: 100; left: 0px}

Posted in: ttg blog