Thursday, September 29, 2011

How To: Highlight Images in Blogger Posts

Highlighting pictures with drop-down shadow is my way to highlight images. What about yours? Do you highlight your post's images with drop-down shadow? If no, then I assume I can help you to highlight your post images with CSS. As I was searching for an styling trick, and I found one which is about CSS styling of Image-free rounded corners, drop shadows and gradients. I have tried my-self this image-free shadow trick to other parts of my blog and I like how it changes the behavior of in-post images! See one image to see the effect below.



To show the images of your blogger posts this way, all you have to do is just follow the process below.

1: Log in to your Blogger Account, and go to Design >> Edit HTML. 


2: Find ]]></b:skin>, and paste the following code just above ]]></b:skin>.


3: Now Click on Save Template.


.post img {
 padding:4px;
 border:1px solid #eae4e4;
box-shadow:rgba(0,0,0,0.5) 0px 0px 24px; border-radius:12px;
 }

You are done. Now Enjoy! :)