NgeShare - Cara Membuat Efek Bayangan pada Gambar di Posting Blog

Pada kesempatan kali ini, saya akan memberikan tutorial untukmu yang ingin membuat atau memberikan efek bayangan pada gambar di postingan blogmu. Oke langsung saja kita simak tutorialnya berikut ini.

1. Login ke Blogger
2. Pada halaman Dashboard pilih menu "Tema"
3. Kemudian kamu tekan tombol "Edit HTML"
4. Pada fitur "Edit HTML", kamu cari kode .post-body img

5. Kemudian kamu tambahkan kode di bawah ini ke dalam elemen kode .post-body img

- Kode box shadow (normal)

box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);

- Kode box shadow-md (medium)

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);

- Kode box shadow-lg (large)

box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);

- Kode box shadow-inner

box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);

- Kode box shadow-outline

box-shadow: 0 0 0 3px rgba(52,144,220,0.5);

Contoh pemasangan:

.post-body img {
padding: 1px;
background: transparent;
border: 2px solid transparent;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);
}

6.  Lalu Anda klik Simpan

• Result