Image Thumbnail

Ada kalanya waktu saya pengen nampilin gambar dipostingan pengen di kecilin tapi juga bisa ngliat gambar sesuai dengan ukuran sebenarnya.

Kalo cara biasanya, dengan memasukkan link di dalam gambar tersebut. Tapi kudu nge-klik gambar itu sendiri. Rada ngrepotin sebenernya.

Tapi, dengan cara baru ini, gambar asli bisa langsung tampil hanya dengan hover-nya. Alias, bisa langsung tampil dengan hanya menggeser cursor ke gambar tersebut.

Tertarik? Silahkan dipelajari.




Copy code² dibawah dan paste di CSS u/ multiply ato di HTML u/ Blogspot.

/* Thumbnail */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

Gunakan code dibawah untuk tampilkan gambar di postingan,

<a class="thumbnail" href="#thumb"><img src="img.jpg" width="100px" height="66px" border="0" /><span><img src="img.jpg" /><br />Keterangan di sini</span></a>


Ganti img.jpg dengan link gambar
Edit width dan height sesuai dengan kemauan
Edit Keterangan di sini dengan keterangan gambar


Contoh: Gerakkan cursor ke gambar..



Seandinya Keely Hazell 'bermin bola' dengan saia




See... r1d0aja: Smile

Comments

  1. Makacih tipsnya ea? Aku masi newbie, jadi masi cari2 tips.. :D kunjung balik bl0g q ea.. Trus kasi masukan juga.
    Kasi b0c0ran java script buat masukin iklan dunk di blogspot juga dunk

    ReplyDelete

Post a Comment

Web blog ini menerima semua comment, critic, caci maki, umpatan, bahkan penghina`an.
Karena kebebasan berpendapat juga telah di atur dalam undang-undang.