Sunday 22 July 2012

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



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>



Note: 

  • 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 orange with preferred color hex value.
  • instead of "Your text here...." you will have your Post content.
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>

Note:

  • in orange, 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.

1 comment:

  1. I really like your take on the issue. I now have a clear idea on what this matter is all about.. background remover

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...