Membuat Bayangan Foto Membesar Pada Blog

Banyak website atau blog yang kita jumpai dengan menampilkan foto (image) membesar saat didekati mouse dan kata orang asing menyebutnya Drop Shadows to Images and Expand them on Mouse Hover, katanya sih...!!!!

Demo alias contohnya bisa anda liat di menu Kang Onk Design [Image], jika tertarik silakan ikuti langkah berikut.

• Masuk ke akun Blogger Anda;
• Klik tombol Rancangan dan pilih Edit HTML;
• Cari kode ]]></b:skin>
• Jika ketemu copy paste kode dibawah ini sebelum ]]></b:skin>

/*Image Galery*/
#hoverbox-wrapper {padding-left:30px;padding-top:10px;border-bottom:1px solid #eeeeee;height:300px;}#hoverbox-wrapper-b {margin-left:30px;margin-top:10px;margin-bottom:30px;}ul.hoverbox {cursor: default;list-style: none;}.hoverbox a {cursor: default;}.hoverbox a .preview {display: none;}.hoverbox a:hover .preview {display: block;position: absolute;top: -33px;left: -45px;z-index: 1;}.hoverbox img {background: #fff;border-color: #aaa #ccc #ddd #bbb;border-style: solid;border-width: 1px;color: inherit;padding: 2px;vertical-align: top;width: 100px;height: 75px;}.hoverbox li {background: #eee;border-color: #ddd #bbb #aaa #ccc;border-style: solid;border-width: 1px;color: inherit;display: inline;float: left;margin: 3px;padding: 5px;position: relative;}.hoverbox .preview {border-color: #000;width: 180px;height: 150px;}

• Lalu Simpan Template.

Langkah selanjutnya

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalam HTML tersebut;

<li><a href="#"><img src="Your URL Image" alt="" /><img src="Your URL Image" alt="description" class="preview" /></a></li>

• Lalu Simpan, cling selesai.

Catatan:  Rubahlah hruf yang bercetak tebal dengan URL foto anda.
Semoga berhasil.....