Now Add Different Background Color Or Image In Each Blogger Post

If you have multiple authors in a blog or want to make a specific post stand-out, you can make your posts to appear in different color or place a background image behind your posts.
In this tutorial i will show you how you can do this by adding some simple codes in your Blogger posts. (observation: this won't take effect if you have the read more function enabled on your blog...)

 

See the Demo

Change the color of the post background

When you create a post, switch to Edit HTML, near the Compose tab.
Add the following code just at the beginning and at the end of your post content.

<div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

</div>

• place the red line at the BEGINNING of your post.
• add the div tag in blue at the END of your post.
• replace the part in green with preferred color hex value.
• instead of "Your text here...." you will have your Post content.

It's done by wrapping your Post content into a "div" element. You can apply this setting anytime to your already published posts too or change/remove it.

Here's the example of the placed code in the Post Edit box:

Add a background image behind the Blogger post

<div style="background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

</div>

• in green, you need to place the URL address of your hosted picture (use Photobucket, Tinypic etc.)
• in red is the line you have to place at the BEGINNING of your post.
• in blue is the line you have to place at the END.
• instead of "Your text here...." you have your Post content (if not, switch back to Compose tab, type your post content and then come back to edit your post)

Now click PUBLISH POST and you are done.