Add Styles And Effects To Your Images In Blogger

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

Intro And Explanation

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.

Step 1

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.

Step 2

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.

Adding Borders To Your Images.

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

Adding Padding To Your Images.

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

Adding Back Ground To Your Images As Border.

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

 Theo allblogtools