Salah satu fungsi gambar dalam sebuah tulisan dalam hal ini posting blog adalah untuk menambah daya tarik suatu halaman / postingan di mata pengunjung oleh karena itu para master blog diharapakan untuk bisa menyajikan gambar dengan tampilan yang semenarik mungkin, salah satu upayanya yang bisa dilakukan adalah dengan memberi efek pada gambar sehingga gambar akan tampil lebih menarik.

Salah satu efek gambar yang sering dipakai adah efek shadow atau bayangan yang tampak disekeliling gambar, dan efek ini sebenarnya bisa dibuat pada aplikasi gambar seperti Adobe Photoshop dan sejenisnya, namun jika kita tidak familier dengan aplikasi tersebut sementara gambar yang tersedia belum ada efek shadow atau bayangan, maka efek ini bisa dibuat dengan menggunakan beberapa property dari CSS3.

Penggunaan CSS untuk memberikan efek bayangan / shadow dapat dilakukan dalam dua kategori yaitu Efek yang digunakan pada setiap gambar yang berada dalam postingan yang akan kita bahas pada postingan kali ini, atau bisa juga hanya digunakan pada gambar tertentu secara khusus, baik gambar yang terletak dalam postingan tertentu atau gambar yang terdapat dalam widget. yang akan kita bahas pada postingan berikutnya

Adapun langkah - langkah yang dilakukan untuk memberikan efek shadow pada setiap gambar dalam postingan blog adalah sebagai berikut:
  • Login ke template Blogger
  • Pilih menu template kemudian jangan lupa backup template terlebih dahulu, untuk menghindari terjadinya resiko rusaknya template blog
  • Pilih "edit HTML" dan centang kotak "expand widget template"
  • Cari kode CSS berikut:
    .post img
  • Ganti dengan kode berikut ini:
    .post img{ padding:5px;   background:#fff;  
    -moz-box-shadow: 0 0 5px 5px #888;
    -webkit-box-shadow: 0 0 5px 5px #888;
    border-radius:5px;
    -moz-border-radius:5px;}
  • Jika kode  .post img  tidak ditemukan Copy dan paste kode tersebut diatas kode ]]></b:skin>
  • Simpan Template, kemudian lihat hasilnya kira kira seperti ini:




Keterangan:
Untuk mendapatkan hasil yang sesuai dengan keinginan kita, kita dapat mengedit property dari CSS tersebut diatas,

Demikian postingan kali ini mengenai tips cara membuat efek shadow / berbayang pada gambar di postingan blog dengan menggunakan kode CSS, semoga bermanfaat.