Tuesday, February 18, 2014

How To Change Background Color Or Image In Each Post


By on Tuesday, February 18, 2014



When you want to make specific post stand out and when you have multiple authors on blog then you can change image or background color. Therefore, this tutorial will help you how to change background color and image in each post. It is quiet easy to change just you have to add some codes to make your blog look professional and unique.

Note: It won't effect your blog but make a backup first for safety step.



How To Change Background Color 

When you create post there is option of HTML which is just near Compose tab you can see on the top left corner.just add the below code at the beginning and and at the end of your post content.
 <div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Add your text here
</div>
Add the <div style> tag in red at the beginning of the post.
Change the color you like #DCC368 (search for color's hex value).
Add the </div> tag in blue at the end of the post.
And between both tags add your content.

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




                                   How To Change Background Image in Blogger Post


Add the following code at the start and end of your post content.
 <div style="background-image: url(Put Image URL here); background-repeat: no-repeat; "> Add your text here
</div>
Add the <div style> tag in red at the beginning of the post.
Add your image URL in green line as mentioned above.In green line you have to put URL address of hosted picture (Tinypic, Photobucket, Flickr, Blogger itself etc).
Add the </div> tag in blue at the end of the post.
And between both tags add your content.

Publish It, Your Work Done.
Happy Blogging!

About Rafay Ansar

Rafay Ansar is a young geek, freelancer writer, blogger, social media expert and author of MakeSomeSense. He writes about technology, Information and Securities, Web Development, Tips And Tricks, Blogging And Other Web resources.

0 blogger-disqus:

Post a Comment