many bloggers contacted me asking about an easy way to style blogger images, all posts images with out editing every single post.
so today I’ll teach you a very easy way to style and add nice effects to your all your blog images at once and no need to edit every single image at your blog.

we will learn today how to :

• Add borders to our images.
• Change borders style and color.
• Increase and decrease the space between the image and the border.
• Add any background to our images as a border.

and you can see the final result for this tutorial at this demo heresee the image in the post

Or see this image

So lets start

we will style the blogspot images depending on the following css tage
don’t worry, it’s very very easy and every body can do it

• Border

there are a lot of border styles and we can change its color.

• Padding

the space between the border and the image.

• Background

the background between the image and the border and we can make it a picture like the demo or just a plain color.

You can understand what this tags mean by checking the next image.

and here is the tags explained for the demo blog in the following image.

And Now, Lets do it.

Now go to Blogger and log in, then navigate to : Layout >> Edit html >> and find the following code you can click ctrl+f to find it via your browser finder

.post img {

Now this is the opening tag for your images style and the symbol{ mean that this is the start of styles, you’ll need to find the style end symbol witch looks like this }
And please delete all lines between the two symbols.
so here is an example for the codes before and after deleting the style codes.
note : the style lines are not the same for all templates, you may have more or less lines in your template.
here is the example
BEFORE

.post img {
  border: 5px solid #F08C00;
  padding: 10px;
  }

AFTER deleting the style lines

.post img {


  }

Now you images have no any styles and if you clicked Save Template
now , your images will be displayed with out any borders or styles. if you like to keep it like that ,ok just click Save Template .
Or leave and go to step 2 if you want to add styles to your images.

now you have your images style code like the following

.post img {


  }

now we have to start add style lines, and as we said before you can add all the following lines or only one or two, we have 3 lines to add.
border line, padding line, and background line,
so lets start.

Add the next line between opening and closing symbols

border: 5px solid #F08C00;

so your code should looks like this

.post img {

border: 5px solid #F08C00;

}

if you saved your template now you’ll have the following style for your images

This is image with 5px width orange border
and you can change the following parts in the previous line to give it your favorite style.

 5px

You can change number 5 to increase or decrease the width of the border

solid

This word control the type of your border
And you can change this to any one of the following values

solid

double

groove

dotted

dashed

inset

outset

ridge

hidden

F08C00

this is will change your border color, and you can get your favorite color code from our hex / Html color code generator here.
now we added a border for your images style, you can click Save Template
Or continue to the next step

padding will add a space between your border and your image.
Add the following line to your code

padding: 10px;

You can change this number 10 for example to 7 or 15 to decrease or increase the space between your image and border.
now your code should looks like this

.post img {

border: 5px solid #F08C00;

padding: 10px;

}

and your images will look like this:

This is image with 5px width orange border and 10px padding
now we added a border and padding for your images style, you can click Save Template
Or continue to the next step

To make this effect active you must apply the previous step : add padding.

Now add the following line to your code

background: url(Image Location);

and please change Image Locationto your favorite image url,
Recommended : search Google for pattern.

Now you should have your code like this.

.post img {

border: 5px solid #F08C00;

padding: 10px;

background: url(Http://www.host.com/image.gif);

}

And your image should look like this

This is image with 5px width orange border , 10px padding and with this image as back ground
Now Click Save Template And go check your Blog,

I wish you understand and love this tutorial and please don’t hesitate to leave your comment for support and feedback. to get more tricks and latest updates please subscript to our feeds or follow us on twitter