Cara Membuat Efek Bayangan pada Gambar Posting Blog

Pada artikel sebelumnya pernah kita tuliskan cara membuat efek bayangan pada link blog agar terkesan lebih menarik. Selain dapat membuat efek bayangan pada link blog kita juga dapat meperindah gambar pada postingan yaitu dengan menambahkan efek bayangan seperti halnya efek banyangan pada link blog.


Cara membuat efek bayangan pada image atau gambar posting blog sangat mudah, Anda tinggal menambahkan beberapa kode efek bayangan pada tema blog. Sebagai catatan efek bayangan jangan terlalu tebal agar tetap terkesan elegan pada gambar posting blog. Kalau Anda tertarik langsung saja berikut langkah cara membuat efek bayangan pada image atau gambar posting blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tema >> klik Edit HTML
3. Kemudian cari kode .post-body img (Gunakan Ctrl+F untuk mempermudah pencarian).
4. Tambahkan kode efek bayangan berikut pada bagian .post-body img
box-shadow:1px 2px 5px rgba(0,0,0,.1) #000;
5. Contoh kodenya akan seperti dibawah ini :
.post-body img,.post-body .tr-caption-container,.Profile img,.Image img,.BlogList .item-thumbnail img{background:#fff;border:1px solid #eee;-moz-box-shadow:1px 1px 5px rgba(0,0,0,.1);-webkit-box-shadow:1px 1px 5px rgba(0,0,0,.1);box-shadow:1px 2px 5px rgba(0,0,0,.1) #000;padding:5px;}
Keterangan :
Nilai 1px : nilai efek bayangan kekanan, semakin tinggi nilainya semakin besar dan kekanan efek bayangannya.
Nilai 2px : nilai efek bayangan kebawah, semakin tinggi nilainya semakin besar dan kebawah efek bayangannya.
Nilai 5px : efek blur pada bayangan, semakin tinggi nilainya semakin tidak jelas atau blur bayangannya dan semakin kecil nilainya semakin jelas efek blur-nya.
Nilai #000 : kode warna dari bayangan, bisa Anda ganti sesuai dengan keinginan.
6. Kalau sudah Simpan tema.

Nah, itu tadi cara membuat efek bayangan pada gambar posting blog, warna dan tampilan bayangan dapat Anda ganti sesuai dengan keinginan dengan tetap memperhatikan kesan elegan pada gambar atau image blog. Semoga berhasil dan bermanfaat!
Tags

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.