Membuat image CSS popup di blogspot

Kali ini saya akan memposting bagaimana cara membuat image atau gambar muncul (popup) di blogspot, yang apabila kita mengarahkan kursor mouse ke gambar tersebut maka akan muncul gambarnya menjadi besar, trick ini sangat bagus buat yang suka menaruh koleksi foto-foto pribadinya di blognya, teknik ini ga perlu javascript hanya sedikit permainan di bagian CSSnya. Kalau mau lihat contohnya bisa lihat di bawah ini :

I'm so Cute

Hi, my name is Cella and you?

Arahkan kursor mouse sobat ke gambar di atas dan lihat efek popupnya

Mau tahu cara buatnya?

1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML

Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!

2. Centang tanda Expand widget, setelah itu cari kode ini ]]></b:skin> dan masukkan kode di bawah ini di atas kode tersebut :

.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-width: 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 */

}

Kalau mau ambil code di atas klik view plain nanti akan muncul popup code silahkan copy dari situ

Kemudian save hasil pekerjaan sobat.
3. Sekarang untuk mengaplikasikannya dengan memakai kode di bawah ini :

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>

<a class="thumbnail" href="#thumb"><img src="Image Url" width="100px" height="66px" border="0" /><span><img src="Image Url" /><br />YOUR TEXT</span></a>


Ganti Image URL dengan alamat gambar sobat blogger
Ganti YOUR TEXT dengan kalimat yang sobat blogger kehendaki

Teknik image css popup ini bisa di aplikasikan di dalam postingan ataupun di sidebar dengan cara add page elements > HTML/Javascript terus copy paste kode di atas tersebut. Thinking Out The Box sesuaikan dengan imajinasi sobat blogger. Ok sampai di sini aja and happy blogging. Kalau kurang jelas bisa YM saya yang sudah tersedia di sidebar