Each Post in Different Color or with Different Background

December 23, 2008

Now there's a practical tutorial!
How to place different background picture for each post? Or how to make each post appear in different color?

Here's the example: different background in each blogger post...

WHEN IS THIS CONVENIENT?
► if you want to make a specific post stand-out (like a theme post)
► when you have multiple authors in a Blog, this is an easy way to unify the Post appearance according to each author
► this method can also be used just to highlight just the part of the Post
► and anything else you can think of......this can really break dullness of the regular Posts....

HOW TO DO IT?
It's done by wrapping your Post content into a "div" element. You can apply these setting to your already published posts, too....and change/remove it anytime....

Code for Changing the Color of the Post Background

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Your text goes here....
</div>

...in orange is the line you have to place at the BEGINNING of your post....
...in pink is the line you have to place at the END...
...replace the part in green with preferred color hex value...
...instead of "Your text here...." you will place your Post content, of course...
...we've added some padding, so the text is not too close to the borders...

Code for placing the Background image behind the Post

<div style="background:url(URL ADDRESS OF THE PIC) no-repeat;">
Your text goes here....
</div>

...in green, you need to place the URL address of your hosted picture (use Photobucket, Tinypic...)
...in orange is the line you have to place at the BEGINNING of your post....
...in pink is the line you have to place at the END...
...instead of "Your text here...." you will place your Post content, of course...

Now, you have some more options here...
► you can use small pattern, and set it to repeat across the Post area (just remove "no repeat" from the code)
► you can position the picture and place it in desired location inside the Post (background pictures in blogger)
► combine color + background picture (background:#000000 url(URL ADDRESS)no-repeat;)

Here's the example of the placed code in the Post Edit box:
► my advice is to do the code placing when you're done with composing the post
► do it in EDIT HTML Post editor
► if you go back to edit the code, you will notice that the Blogger slightly changed the code....no worries, it's the same thing, just the different looks...

Smile!