How to Add Different Background Color or Image in Each Blogger Post andrey воскресенье, 14 апреля 2013 г. No Comment

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...)



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.

#DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

  • 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:
blogger posts color, backgrounds, blogger tricks

Add a background image behind the Blogger post

IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

  • 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.
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...)



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.

#DCC368; padding: 5px 8px 5px 8px;">
Your text goes here...

  • 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:
blogger posts color, backgrounds, blogger tricks

Add a background image behind the Blogger post

IMAGE-URL-HERE); background-repeat: no-repeat; ">
Your text goes here...

  • 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.
by Jillur Rahman

Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.

Follow him @ Twitter | Facebook | Google Plus

No Comment