Dibalik Waktu

Kalau bicara soal css, banyak banget yang bisa di ceritakan baik tentang kelebihannya sekaligus kemudahan menggunakannya. Dalam soal tampilan web, css merupakan rujukan yang paling pertama dan utama. Buktinya banyak sekali tutorial mengenai css dan efek-efek yang membuat suatu web manjadi lebih fresh dah ( ^_^ ).

Popup Image Viewer adalah salah satu dari contoh penggunaan css. Dengan menggunakan efek ini sebuah gambar akan muncul dan menjadi lebih besar saat mouse berada diatas gambar. Dari pada bingung mending langsung lihat contohnya :

Hidup Blog Indonesia

Jadilah Blogger yang di Idolakan !!

Tutorial :

1. Masuk ke Blogger.com

2. Login di blogger

3. Klik Rancangan > Edit HTML

Di firefox tekan CTRL+F lalu cari " ]]></b:skin> ". Lalu ganti dengan kode ini :

.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 60px;
}
]]></b:skin>

4. Simpan Template

<a class="thumbnail" href="Link ke Gambar">
<img src="Link ke Gambar" width="100px" height="66px" border="0" />
<span>
<img src="Link Ke Gambar" />
<br />Keterangan Gambar
</span>
</a>

1. Ganti teks warna merah dengan link / url gambar kamu.
2. Ganti teks warna hijau dengan keterangan gambar yang kamu mau.