Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Add Styles And Effects To Your Images In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add Styles And Effects To Your Images In Blogger

Add Styles And Effects To Your Images In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

15,188 views

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

Add Styles And Effects To Your Images In Blogger

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.

Add Styles And Effects To Your Images In Blogger

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

Add Styles And Effects To Your Images In Blogger

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

Add favicon to blogger

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:

Add favicon to blogger

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

Add favicon to blogger

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

Liked It ? Please Share

Comments

17 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. BEBEN says:

    xixixiixi…good good i am have understand now…-__-‘

  2. Matt says:

    very good thank you

  3. HighSpeedDLS says:

    hello i can’t find .post img {

    plzz help..

    • Max says:

      @ HighSpeedDLS, then you can add it yourself just before this part
      ]]></b:skin>

  4. sulltan says:

    wow nice trick…. thank u

  5. lyndon says:

    You can add this css code if you want to make round corners of the border. It will only function in Firefox and Safari browsers.

    border:5px solid #F08C00;
    background: #EFEFEF;
    padding:3px;
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius:10px;
    -moz-border-radius-bottomleft: 10px;

    Wanna see the result, I just applied it to my blog. Mixmo Anime

    I hope you it will be a big help…

    Hello max how are you… it’s me lyndon

    • Max says:

      Hi Lundon, this is really great but i didn’t add this function coz it’s not working with all browsers.
      thanks for the info.

  6. lyndon says:

    Hello max i just love your posted article it is a big help to all. Keep it up max…

  7. mrjack says:

    thanks Max !

  8. anas says:

    thank you Max for this trick 😉

  9. Max says:

    thanks mrjack and anas, i wish you used it.

  10. AOA nice post, well have read almost each of your posts, mind blowing, you define the words so simply that one cannot have any confusion regarding the post, have used some of your widghts in my blog,http://jini2ansu.blogspot.com/
    pls give me your kind suggestions to make it more vital,thanks from deep of my heart.

  11. Max says:

    @ mirza mushraf baig, thanks for your amazing comment, please tell me if you need more help.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here