Ini Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger

Ini Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger - Agar gambar postingan terlihat seperti ada banyangnya dalam bahasa koding maka kita harus memberinya sebuah efek yang bernama shadow, bukan pak shadow tetangga kalian ya? hehhe. Sesuai namanya efek shadow ini berfungsi untuk memberikan gambar seolah - olah ada kayak bayangan hantu gitu, dimana kita cukup meletakan fungsi di dalam css.
 

Dengan adanya efek shadow pada image artikel blog sobat maka akan membuat kesan blog anda akan terlihat lebih cantik dari sebelumnya, tapi ada orang yang gak suka dengan efek ini, saya tidak tahu apa alasanya, karena selera orang itu beda - beda. Termasuk saya ini orang yang suka efek shado, namun tak memasangnya di blog saya.

Ini Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger

1. Memberi Efek Bayangan di Gambar Blog

Kalau cara yang pertama ini nanti semua gambar yang ada di dalam postingan blog anda akan secara otomatis ada efek shadownya, jadi anda tak perlu repot ngasih satu persatu pada div gambar secara manual, karena hal itu menyita waktu dan tenaga kita.

1. Pertama silahkan sobat pergi ke editor template blogger seperti biasanya dengan cara memilih menu template => edit html cari kode]]></b:skin>
2. Kemudian pada post gambar kita kasih deh efek shdownya , caranya adalah kita pasang kode dibawah ini tepat diatas kode]]></b:skin>

   .post-body img{background:#FFF;/* the background color around the image */
   padding:15px;/* The Space Between Border and Image */
   border-radius:50% 0;/* Rounded border */
   box-shadow:0 0 15px #000;/* Shadow */
   -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
   .post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
   -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

3. Simpan Template dan lihat hasilnya

2. Membuat Efek shadw pada Gambar Blog

Kalau sobat hanya pada gambar tertentu yang akan diberikan efek shadow, maka jangan gunakan cara pertama diatas, gunakanlah cara ini, karena cara ini menggunakan cara manual, yang nantinya kita akan memberikan efek bayangan pada gambar yang kita inginkan.

1. Ketika mengupload sebuah gambar pada postingan blog , pada bagian HTML ( bukan compose ) terdapat kurang lebih kode gambar seperti ini

   <div class="separator" style="clear: both; text-align: center;">
   .....bla....bla.....bla.....
   </div>

2. Kemudian kita tambahkan kode box-shadow: 3px 3px 8px #000; ke dalam <div class="separator" style="clear: both; text-align: center;">
3. Sehingga nantinya kodenya akan berubah menjadi power rangers seperti ini :

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

4. Terkahir kita pratinjau terlebih dahulu , jika ada efek banyanganya tinggal publikasikan

Penutup

Terima kasih atas kunjungan anda di LingkaranDunia, serta membaca artikel yang mengenai Ini Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger. Jika ada yang kurang di mengerti silahkan ajukan pertanyaan lewat Email, Facabook LingkaranDunia dan lewat kolom komentar yang kami sediakan di bawah artikel ini. Lihah Juga Postingan sebelumnya mengenai, Cara Compress Css Blog Agar Fast Loading Lebih Cepat