Membuat efek shadow pada gambar postingan

Selamat malam sobat :) Lama tak jumpa ,... hihihi
Langsung ke topic pembahasan ajah ya,.. :p
Pernahkah anda mampir di situs web blog orang lain dan melihat gambar di konten blog mereka seperti ada bayangan /shadow, baik itu di postingan atau halaman lainya ? .  Saya rasa anda pasti pernah melihatnya , Sebenarnya tutorial pemasanganya itu pada blog sangatlah mudah karena tinggal menambahkan CSS saja pada bagian template.

Efek shadow merupakan salah satu cara blogger untuk mendesain dan mempercantik tampilan halaman mereka, itu bertujuan untuk menarik perhatian pengunjung blog supaya lebih betah dan sering mampir ke blog kita. Dengan cara menambahkan efek bayangan tersebut di blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda , tetapi ingat Bahwa itu juga harus disertai dengan artikel yang terupdate serta berkualitas.

Baiklah cukup basa basinya dan sekarang saya akan berikan tutorialnya pada anda, saya akan memberikan cara membuat efek bayangan yang keren serta caranya yang mudah untuk anda pasang di blog , jika anda tertarik silahkan ikuti langkah - langkahnya dibawah ini

Membuat efek shadow pada gambar postingan

Cara yang saya bagikan ini untuk membuat semua gambar yang berada di dalam postingan blog dengan otomatis mempunyai efek shadow, jadi sobat tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.post-body img{background:#FFF;/* 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}

5. Kemudian simpan template sobat.
Sekian dulu tutorial mengenai efek shadow pada gambar di blog semoga bermanfaat.