Buat Image Pop Up Di Blogspot

Mungkin ada yg bertanya tanya 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 sini Arahkan kursor mouse sobat ke gambar di atas dan lihat efek popupnya
Langkah Langkah Pembuatannya sebagai berikut:

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.