0 2 Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger

Cara Mudah Membuat dan Menambahkan Efek Bayangan Pada Gambar Blogspot- 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.

Cara Pertama 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

Opsi Kedua 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

Nah itulah 2 Cara Gampang Membuat sekaligus Menambahkan Efek Bayangan Pada Semua Gambar di Blogger . silahkan sobat pilih salah satu dari kedua opsi tersebut , jika suka yang otomatis pakai yang opsi satu , jika pakai yang manual silahkan pakai cara kedua. demikian tutorial memberikan efek shadow pada image blog semoga bermanfaat bagi sobat yang membutuhkan

Sumber: masyadi.com

Komentar →