Cara menambahkan Efek Bayangan pada Gambar di Blog (Untuk Pemula)

HaiSob apa kabar 😊? pada kesempatan ini saya akan membagikan tutorial cara menambahkan bayangan/ shadow ke gambar yang ada di postingan Blog.

Bagi kamu yang sudah lama nge-blog mungkin saja sudah biasa dan tidak asing lagi dengan hal ini, tapi mungkin saja ada diantara kamu yang belum tahu dan ingin mencobanya.

Kamu dapat membuat efek bayangan ini permanen kedalam template Blog dengan cara mengedit CSS blog atau hanya menambahkankan efek bayangan ini ke gambar yang di inginkan, pada postingan yang diinginkan saja.

Membuat Efek Shadow Pada Gambar


Cara menambahkan Efek Bayangan pada Gambar di Blog (Untuk Pemula)


Baca juga: Cara membuat tombol Back To Top di Blog

Cara 1: Menambahkan bayangan pada gambar di postingan tertentu


Untuk bagian pertama kita hanya akan menambahkan efek bayangan ke gambar yang kita inginkan saja, pada postingan yang diinginkan.

1. Buat postingan/artikel di blog kamu
2. Upload gambar ke postingan, misalnya/contohnya gambar seperti di bawah ini yang saya upload dan belum ada efek bayangannya :

Cara Menambahkan Efek Bayangan Pada Gambar Blog

3. Untuk menambahkan bayangan silahkan ganti mode penulisan anda dari COMPOSE ke mode HTML.
4. Temukan kode gambarnya, Misalnya kodenya seperti ini (hanya contoh saja):
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-0sJnViJaafY/WSV6gp-SJ0I/AAAAAAAAH7E/bzk2VY5ohZICiszgSIDUm3mpB8lnBjaYwCLcB/s1600/efek_bayangan_pada_gambar_blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://4.bp.blogspot.com/-0sJnViJaafY/WSV6gp-SJ0I/AAAAAAAAH7E/bzk2VY5ohZICiszgSIDUm3mpB8lnBjaYwCLcB/s320/efek_bayangan_pada_gambar_blog.png" height="301" width="320" /></a>
</div>
5. Tambahkan kode box-shadow: 3px 3px 8px #000; ke dalam <div class="separator" style="clear: both; text-align: center;">

Sehingga Menjadi :
<div class="separator" style="box-shadow: 3px 3px 8px #000; clear: both; text-align: center;">
6. Contoh hasilnya adalah seperti gambar dibawah ini :

Cara Menambahkan Efek Bayangan Pada Gambar Blog

Keterangan :

box-shadow: 3px 3px 8px #000;
Kode #000 adalah warna bayangan, untuk mendapatkan warna-warna yang lain silahkan lihat : Generator Warna.

Baca juga: Cara mengatur/mengubah lebar template Blog

Cara 2:  Menambahkan Efek Bayangan pada semua gambar yang ada di Postingan


Untuk cara yang kedua adalah dengan mengedit CSS template Blogger agar bayangan ini ada pada semua gambar pada postingan blog.

1. Di Blog Bloger 😊
2. Pilih menu Template ➔ Edit HTML
Cara 2:  Menambahkan Efek Bayangan pada semua gambar yang ada di Postingan
Template - Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </style>
.post-body img { -webkit-box-shadow: 3px 3px 8px #000;-moz-box-shadow: 3px 3px 8px #000; box-shadow: 3px 3px 8px #000;}
4. Save template.

Baca juga: Cara menambahkan efek bayangan pada pinggir/tepi tema blog

5.Save template dan selesai

Cara menambahkan efek bayangan/shadow pada gambar blog pada cara yang ke dua adalah untuk keseluruhan gambar yang ada di postingan blog berbeda dengan yang pertama, terserah kamu mau coba yang mana.