Different
background picture for each post and each post appear in different color background. Do you know that you can have your each blog post
displayed in various styles with different background colours or
different background images? Yes it’s true you can show individual blog
post in colored background or with different image background.
Implementing this latest blogger tricks you can make your blog stand
unique in various aspects. Let’s say for example, if you accept guest
posts and have multiple authors contributing articles to your blog, this
proves an easy way to differentiate the post appearance according to
individual author. Following this blogger tips you can also make a
specific post stand-out among other hundreds and thousands of posts.
Below
I have explained very carefully and in plain English. I believe you
will enjoy reading this blogger unique trick and work with the codes for
giving your blog a unique look.
Each Post in Different Color or Different Background Images.
...............................................................................................................Instructions to Note
...............................................................................................................
Let me also make you clear that there
in no need to back up the template codes of your blog. We will not work
with template instead we will go to regular create a new post option in
blogger. This blogger hack is done by wrapping your Post content into a
"div" element. You can apply these setting to your already published
posts too and you may change, remove it at any point of time.
...............................................................................................................
Code for Changing Color of the Post Background in blogger
...............................................................................................................
<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Your post content goes here....
</div>
Your post content goes here....
</div>
Place the purple code at the end of your blog post.
Replace the part in green with your preferred color hex value.
Place the red part of the code at the beginning of your blogpost.
Make sure you replace the part in green" Your post content goes here...." with the post content.
You can also edit padding, we have added some padding so the text does not move too close of far away from the borders.
...............................................................................................................
Code for placing Background image behind Post in blogger
...............................................................................................................
<div style="background:url(URL ADDRESS OF THE PIC) no-repeat;">
Your post content goes here....
</div>
Your post content goes here....
</div>
Place the purple code at the end of your blog post.
Replace the part in green with the URL of the image.
Place the red part of the code at the beginning of your blogpost.
Make sure you replace the part in green" Your post content goes here...." with the post content.
You can also edit no-repeat, we have added no-repeat, so the image does not repeat itself.
If you use repeat you can use small pattern images so that it repeats itself to cover the whole post area.
...............................................................................................................
Here's the Example on How to Place a Code:
...............................................................................................................
<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
We bring you the best in blog, blogging tricks and tips. thebest-technic.blogspot.com provides an opportunity for bloggers to come together to collaborate, learn and experience a difference. We bring you all tutorials like Earning online, templates hack, Google Adsense tricks, free blog hosting and many more. Hope this guide will help those who are finding the way around, just like me...
</div>
We bring you the best in blog, blogging tricks and tips. thebest-technic.blogspot.com provides an opportunity for bloggers to come together to collaborate, learn and experience a difference. We bring you all tutorials like Earning online, templates hack, Google Adsense tricks, free blog hosting and many more. Hope this guide will help those who are finding the way around, just like me...
</div>
Suggestions:
............................................................................................................... Work with the codes in EDIT HTML Post editor.
Save code in template editor in blogger settings for future use.
If you don't want to display background color or background image than you may simply remove the code by deleting the red, green and purple codes from blog post body or settings.
The Best Technic