Adding shadow around blog post images

Today i am going to show you how to add shadow around blogger post images,it is a common customization that most of the bloggers have been using,you may use it for highlight your blog post images,without writing more about it i am going to show you the procedure for applying this.

Follow the following steps carefully
1)  In old Blogger interface:

Dashboard-----Design------Template Designer------Advanced- ---Add CSS

In new Blogger interface:

Dashboard-----Template-----Customize------Advanced------Add CSS

2) Now add the following codes ( press enter after the last character of the last line)

.post-body img {
padding: 1px;
background: transparent !important;
border: 1px solid transparent !important;

 -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
}

  

3) Now click on Apply to Blog

Play with the Codes

Padding:  You can change the padding size from 1 px to your choice.Padding add a small gap around the blog post images.Suppose you want a padding of 3 px then write the code as

padding: 3px;

Background: You can change the background color just replace the word transparent with a color name,like if you want a black background then type black in place of transparent

background: black !important;

Border: Here border attribute works like 'padding' and 'background' attributes.By using both padding and border color you can obtain a special effect around your blog post images to achieve this change set the padding color to White and border color to Black.To customize border only modify the CSS code line related to border as follows

border: 1 px solid:black ! important;

for removing border
border: none ! important;

Shadow: 
    1) To change the horizontal projection of the shadow(to determine where the shadow will be) change the first '3 px' values. (of all three lines),negative  value will move the shadow towards the left side of the image.
    2)  To adjust the vertical projection of the shadow adjust the second '3 px' values (of all three line),negative value will move the shadow towards top of the image.
    3) To control the shadow spread adjust the '10 px' values of all three lines.
    4) To adjust the opacity change the '8 px' values of all three lines.
    5) To change the color of the shadow replace the 'rgba(0, 0, 0, .8)' with your preferred color.

That's all,you are done,if you get any problem,please contact me,give comments