POPUP WITH CSS FOR IMAGE

Kawan's BeBeN ada yang bertanya nih...hihihi ^,^!!! Begini katanya : "Kalau untuk efek photo disorot mouse membesar seperti pada blog ini bgmn mas Ben? Seep" Nah begitu bunyinya. Dan kata-kata ini terlontar oleh saudari Khusnul.
KHUSNUL :

• Age : 19
• Gender : Female
• Astrological Sign: Sagittarius
• Zodiac Year: Horse
• Location: semarang, jawa tengah, Indonesia
• Etc : Profile.

Nah mungkin yang dimaksud oleh saudari Khusnul, trik yang disorot pada gambar dan gambar tersebut itu bisa jadi guwede!!! seperti yang ada dipostingan master of Tutor. Semoga tidak salah. Trik ini juga BeBeN dapat dari Master Subagya...hihihi ^,^. Ya udah moga-moga ajah bener deh ini yang dimaksud. Oke mari kita cek dan ricek bagaimana trik ini bisa bekerja dengan gaya bahasa BeBeN sang petualang blogger sejatih .

1. Log in terlebih dahulu ke Blogspot.com ---> Layout ---> Edit HTML, dan jangan lupa untuk mendownload Download Full Template untuk menghindari hal-hal yang tidak diinginkan.
2. Cari kode ]]></b:skin>, ketik Ctrl + F pada keyboard biar cepaaaattt...wekekekekekkk.
3. Masukkan kode berikut ini, diatas kode yang ada pada nomor 2 tadi:
   .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 */
   
   }
   
4. Kalau sobat ada yang berkenan mengkompress code CSS diatas silahkan langsung kunjungi web berikut ini CSS Compressor.
5. Setelah itu baru deh di SAVE.
Apakah selesai sampai disini!!! Ow ow ow belom dong, itu kan baru CSS-nya doang. Nah untuk mengaplikasikannya supaya berfungsi rumus CSS tersebut, sobat blogger hanya perlu mengingat dan menyimpan baik-baik rumus pemanggilnya yang berikut ini.<a class="thumbnail" href="#thumb"><img src="Image Url / Url Gambar" width="100px" height="66px" border="0" /><span><img src="Image Url / Url Gambar" /><br />YOUR TEXT / KATA-KATA TERSERAH DWEH AH</span></a>
6. Selesai deh baru...hihihi

<img src="Image Url / Url Gambar" width="100px" height="66px" border="0" />
Ganti Image Url / Url Gambar dengan URL gambar sobat. Width dan height disini adalah lebar dan tinggi gambar ketika akan ditampilkan.<img src="Image Url / Url Gambar" /><br />YOUR TEXT / KATA-KATA TERSERAH DWEH AH</span>
Image Url / Url Gambar URL gambar ini adalah gambar nanti yang akan disorot (hasil), dan YOUR TEXT / KATA-KATA TERSERAH DWEH AH kata-kata yang bisa di-add terserah kawan's.Hasilnya akan seperti ini teman (hihihi...-___-) :

Master Subagya
N S : Membuat image CSS popup di blogspot. Happy blogging dan WassaLam...