Membuat Efek Drop Shadow Pada Foto di Blog

Published by Kurnia Septa Rabu, 27 Juni 2012

Foto atau gambar lebih bisa membuat orang jadi lebih lama ingat, selain itu dengan menampilkan gambar atau foto sebagai ilustrasi juga membuat blog menjadi lebih menarik. Orang akan lebih ingat dengan visualisasi blog daripada tulisan, karenan memang konon katanya sebuah paduan warna dalam foto gambar lebih tertanam pada memori otak dari pada hanya sekedar teks.

Dulu, di Belajar Ngeblog di BLOG juga pernah dibahas, cara membuat efek drop shadow untuk gamabar/foto yang ditampilkan di postingan. Sekarang kita akan belajar hal yang serupa, bedanya yang ini adalah membuat efek drop shadow untuk gambar atau foto yang ditambahkan sebagai widget. Kita ingat kembali, efek shadow adalah sebuah efek bayangan yang timbul pada suatu objek, bisa pada sebuah kotak, tabel, dan gambar. Kita tidak perlu mengedit foto itu, hanya menambahkan beberapa kode css efek shadow pada foto sudah terlihat.

Cara Membuat Efek Drop Shadow Pada Foto
1. Login ke akun blogger.com
2. Pilih Tata Letak
3. Lalu tambahkan Tambah Gadget > HTML/Javascript
4. Kemudian masukan kode berikut ini:

<style type="text/css">
.efekshadow{ background:#fff; padding:2px;  border:1px solid #fff;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
border-radius:5px;
-moz-border-radius:5px;
}
</style>
<a href="http://twitter.com/kurniasepta" target="blank"><img class="efekshadow" src="https://twimg0-a.akamaihd.net/profile_images/2312189562/ddm8q41q3ioi43to04je_reasonably_small.jpeg" /></a>

5. Kode yang berwarna merah adalah URL link yang dituju dan URL gambar atau foto, kamu bisa menggantinya sesuai dengan keinginanmu. Simpan jika sudah selesai.