Cara Menambahkan Efek Bayangan Pada Gambar Blog

Ok sobat, berikut ini saya akan membagikan lagi tutorial blog tentang cara menambahkan bayangan/ shadow ke gambar template Blogger. Nah utuk anda yang sudah Master Blog pastinya akan menganggap remeh akan tutorial seperti ini, tapi bagi saya yang masih newbe pastinya ingin tahu caranya.

Anda dapat membuat efek bayangan ini permanen kedalam template Blog dengan cara mengedit CSS blog atau hanya menambahkankan efek bayangan ini ke gambar yang diinginkan saja. Ok untuk bagian pertama kita hanya akan menambahkan efek bayangan kedalam gambar yang kita inginkan saja. Berikut adalah caranya :

Menambahkan Bayangan 1:

1. Upload gambar anda ke postingan misalnya seperti gambar dibawah ini yang saya upload :

2. Untuk menambahkan bayangan silahkan ganti mode penulisan anda dari COMPOSE ke mode HTML.

3. Temukan kode gambarnya, Misalnya seperti dibawah ini :

<div class=”separator” style=”clear: both; text-align: center;”><a href=”https://4.bp.blogspot.com/-RTMns78lCMs/VIUw4nwNhVI/AAAAAAAACqA/B85tSd3rkqs/s1600/Menambahkah_efek_bayangan_di_gambar_blog.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ src=”https://4.bp.blogspot.com/-RTMns78lCMs/VIUw4nwNhVI/AAAAAAAACqA/B85tSd3rkqs/s1600/Menambahkah_efek_bayangan_di_gambar_blog.jpg” height=”301″ width=”320″ /></a></div>

4. Tambahkan kode box-shadow: 3px 3px 8px #000; ke dalam <div class=”separator” style=”clear: both; text-align: center;”>
5. Menjadi :

<div class=”separator” style=”box-shadow: 3px 3px 8px #000; clear: both; text-align: center;”>

6. Dan Hasilnya Contohnya seperti gambar dibawah ini :

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 memasukan Gambar Pada Komentar Blogger.
• Cara menambahkan bayangan ke Pinggir Template Blog.
• Cara Membuat efek Zoom Berputar Pada Gambar
• Cara Menambahkan Efek Bergetar Pada Gambar

Menambahkan Bayangan 2:

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

1. Masuk ke edit HTML template Blog dan temukan kode seperti ini : .post img { max-width:100%;}
2. Tambahkan box-shadow: 3px 3px 8px #000; kedalamnya, sehingga menjadi: .post img { max-width:100%;box-shadow: 3px 3px 8px #000;}
3. Simpan template anda dan lihat hasilnya.

Cara Menambahkan Efek Bayangan/Shadow Pada Gambar Blog pada cara yang ke dua memang lebih mudah, terserah anda mau mencoba yang mana.

Diposkan oleh

Brando Mewo

You Might Also Like: