Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 03, 2013

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


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

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 1:30 AM

0 comments :

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.