CSS Code for Adding Effects to Your Blog Post Image

Hello Friends!! As We all Blogger know this fact that Images are as Important as post content.Even if our Blog content is of high quality and very unique we need Images to make it more effective.
Images help Viewers to understand the content easily.A quick visitor can understand every thing by seeing the images only.So Images are important for blog post.
As image are important so we should make them attractive so that It take attention of all.We must add border effect and hover shadow effect to our image.
CSS is a best way to make these images stylish and attractive.Lets have a look how we can make the image in our blog post.

CSS Codes for Images in Blog Post

Use these simple image codes for your blog post

Simple Thin Border

img { border:1px solid #021a40; }

Double Border

img { padding:1px; border:1px solid #021a40; }

Border and Back Ground

img { padding:5px; border:1px solid #021a40; background-color:#ff0; }

Border and a grey drop shadow

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; }

Border and Grey Drop Shadow With Image link hover effect

img { padding:5px; border:1px solid #021a40; background-color:#ff0; -moz-box-shadow: 5px 5px 0px #999; -webkit-box-shadow: 5px 5px 0px #999; box-shadow: 5px 5px 0px #999; } a:hover img{ border: solid 1px #CCC; -moz-box-shadow: 1px 1px 5px #999; -webkit-box-shadow: 1px 1px 5px #999; box-shadow: 1px 1px 5px #999; }

How To Use These Code

First of All Download your blogger full template from backup and restore so that in case you do any mistake you can get back your old template.

1.Go to Blogger Setting
2.Go to Template Section
3.Click Edit HTML
4.Expand Widget Template
5.Search for ]]></b:skin>
6.Paste Above codes just before ]]></b:skin>