Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis pada Gambar di Blog

Menarik sekali bahwa begitu banyak modifikasi yang bisa dilakukan terhadap gambar yang kita upload. Berbagai macam cara modifikasi untuk mempercantik tampilan gambar yang dapat anda coba untuk membuat pengunjung tertarik untuk datang ke blog anda. Salah satu modifikasi yang pernah saya bahas di blog ini adalah bagaimana anda memberikan efek fading pada gambar, efek lainnya yang dapat membuat pengunjung terkesima dengan blog anda adalah dengan menggabungkan efek drop shadow dan perbesar gambar otomatis pada gambar di blog. Dengan efek drop shadow dan perbesar gambar otomatis ini,  gambar anda akan terlihat seperti melayang saat mouse anda letakkan di atas gambar. Anda tertarik untuk memasangnya di blog anda?

Menggabungkan Efek Drop Shadow dan Perbesar Gambar Otomatis Pada Gambar

Sebelum anda melakukan perubahan pada halaman HTML Template anda, ada baiknya ada mem-backup template anda terlebih dahulu untuk berjaga-jaga bila terjadi error saat memasukkan kode.

Step 1

Masuk ke halaman dashboard > Template > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin> 

.TKBeffect img {
-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s; 
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TKBeffect img:hover {
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow: 0px 0px 30px gray;
-webkit-box-shadow: 0px 0px 30px gray;
-moz-box-shadow: 0px 0px 30px gray;

opacity: 1;
}

Bila suatu saat anda ingin memperkecil ukuran gambar maka anda dapat menurunkan ukurannya 0.7 ke ukuran  yang lebih kecil atau bila anda ingin membuat image menjadi lebih buram (fade) maka anda hanya perlu menurunkan nilai 0.5 menjadi angka yang lebih kecil. 

Step 3

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.

<div class="TKBeffect" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>

Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right"
Silahkan anda melihat hasilnya disini

Lihat Demo 

Bagaimana? efek yang lumayan bukan?
Selamat mencoba!
Wassalam.  

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 1:30 AM

Posted in: Body , Efek , Gambar