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.


#1 Menambahkan Bayangan Pada Gambar di Artikel 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.

#2 Menambahkan Efek Bayangan Pada Semua Gambar


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

1. Di Blog Blogger 😊
2. Pilih menu 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.

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.
0 Komentar untuk "2 Cara Membuat Efek Bayangan Pada Gambar di Blog"