Create a blog, blogging: April 2012

Saturday, April 28, 2012

Google Translate Widget with Flags For Blogger

The Google Translate Widget allows your visitors to translate your site or blog in their own languages.
This widget auto detect your blog language and translate it to the readers chosen language.
It supports 12 different languages: English, French, German, Spanish, Italian, Dutch, Brazilian, Russian, Japanese, Korean, Arabic And Chinese.

How To Add It To Blogger

Go to your Blogger Dashboard >> Design >> Page Elements >> Click on "Add A Gadget" link, choose HTML/JavaScript and paste the following code in the empty box:

Then click on Save

Enjoy (:

Simple Recent Posts Widget for Blogger/Blogspot

This Recent Posts widget will show not only post titles but also post excerpts or snippets on your blog.

What you can do with this widget:

display post titles only
change the number of posts
change the number of characters of the post snippet/excerpt
show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://bloggingcreate.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://bloggingcreate.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://bloggingcreate.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQIlSm079ameX_qFSMhq70IxDE4bCAjzZs5TsAhNb-TuaD292lctsXJbCwvW3780CsAq06Lu5IRGnanWMhW3HbbXhisQLJyF05bwrO7fwLXyYUbPW3qc5p7K3IM_nzOnqn9wX4o3lvo7j/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Change false to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

4. Save your widget. That's it!! Enjoy

Please let me know what you think of this widget by leaving a comment below.
And if you liked this post, please consider sharing it. Thanks!

Thursday, April 26, 2012

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Steps Adding the jQuery Drop-Down menu

Step 1. If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search for the following code:

]]></b:skin>

And before/above it, add the following CSS code:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 3. Now find this piece of code:

</head>

And add this code immediately before/ABOVE it:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout', jsddm_timer)});
document.onclick = jsddm_close;
//]]>
</script>

Step 4. Click on Save Template button.

Step 5. Now go to Design (or Add a layout) > Page Elements > click on "Add a gadget" link and choose HTML/JavaScript, then paste the following code in the empty box:

<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</li></ul>

Note :
You must change links titles and replace the # symbol with the URL address of each of your links
Then click on Save

Important:

- if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
- if drop down links are not showing, do the following:

Go back to Design > Edit HTML and search (CTRL + F) for this code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

You should change 1 with 3 and no with yes like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Save the Template.
Now go to Page Elements and drag your menu immediately below your header.

Here you can see the DEMO.

Wednesday, April 18, 2012

How to Add Emoticons/Smileys in Blogger Comments

This tutorial will show you how to add Kolobok emoticons to your Blogger/Blogspot comments. But first of all, if you want these smileys to appear on your blog, you should first remove Blogger's threaded comments. Read here how to remove threaded comments from your blog.

DEMO

How to add Kolobok Smileys in Blogger Blogspot Comments

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Search (CTRL + F) for this piece of code:

</body>

Immediately above it, copy and paste the following code:

<script src='http://bloggingcreate.googlecode.com/svn/trunk/[bloggingcreate.blogspot.com]smileys.js' type='text/javascript'/><noscript><a href='http://bloggingcreate.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html' target='_blank'><span style='font-size: x-small;'>Add emoticons</span></a></noscript>

Step 3. Now find this code:

<b:loop values='data:post.comments' var='comment'>

And just above it, paste the following:

<div id='smileys'>

Step 4. Try to find the below code (please look below the code from step 3 in order to find it)

</b:loop>

Paste this piece of code immediately after it:

</div>

Step 5. Now find this code (you'll find it 4 times but stop to the 2nd one):

<data:blogTeamBlogMessage/>

And add this code just after it:

<script type='text/javascript'>
//<![CDATA[
function moreSmilies() {
document.getElementById('smiley-more').style.display = 'inline';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()"><div style="font-size:small; font-weight:bold;color:#000000;">Hide Emoticons /<a href="http://bloggingcreate.blogspot.com/2012/04/how-to-add-emoticonssmileys-in-blogger.html">Add Emoticons</div></a></span>';
}
function lessSmilies() {
document.getElementById('smiley-more').style.display = 'none';
document.getElementById('smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()"><div style="font-size:small; font-weight:bold;">Show Emoticons</div></a>';
}
//]]>
</script>
<div class='emoticons'>
<span id='smiley-more' style='display: none;'>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/>:)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/sad3.gif'/>:(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/laugh.gif'/>:))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cray-1.gif'/>:((
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/rofl-1.gif'/>=))
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/suicide-1.gif'/>=D>
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/biggrin2.gif'/>:D
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/blum.gif'/>:P
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/shok.gif'/>:-O
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/eusa_think.gif'/>:-?
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/unsure.gif'/>:-SS
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/flowers1-1.gif'/>:-f
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/doh-1.gif'/>d(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/air_kiss3.gif'/>:-*
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/threaten-1.gif'/>b-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/help2.gif'/>h-(
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/good-1.gif'/>g-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/beee-1.gif'/>5-p
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/yahoo2-1.gif'/>y-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/crazy3-1.gif'/>c-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/spiteful.gif'/>s-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/drinks-1.gif'/>d-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/cheer-1.gif'/>w-)
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/hi-1.gif'/>:-h
<img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/give_heart-1.gif'/>:X
</span>
<span id='smiley-toggle'><a href='javascript:moreSmilies()'><div style='font-size:small;font-weight:bold;'>Show Emoticons <img src='http://i1065.photobucket.com/albums/u389/treeofwisdom4/Smileys/smile3.gif'/></div></a></span>
</div>

Step 6. Finally, find this code

]]></b:skin>

And add this one below, just above ]]></b:skin>

.emoticons {-moz-background-clip: -moz-initial;-moz-background-origin: -moz-initial;-moz-background-inline-policy: -moz-initial;text-align: left;width:400px;}
.emoticons a, .emoticons a:hover {margin-left: 20px;text-decoration:none;}

Note: if you want to change the size of the emoticon container, edit the red code.

Step 7. Save the Template and you're done :]

How To Add or Change Favicon on Blogger Blogspot

Favicon (Favorites Icon) is the small picture (usually 16px x 16px in size) you see beside some some site's name in your browser's address bar.

Having your own favicon with a nice graphical reminder of your site beside is a good way to get visitors attention again. Now Blogger users can add a custom favicon for their blogs from the Design > Page Elements tab, by clicking on the Edit link on the "Favicon" element above the navbar element.

"For many bloggers, having a custom favicon (the tiny image displayed in your browser’s window or tab) is the finishing touch that ties together the design and identity of a great looking blog. Today, we're pleased to announce that Blogger in Draft users can now add a customized favicon to their blog. ~Blogger in Draft"

Steps adding your own favicon

1. Log in to your Blogger's Dashboard, go to the Design -> Page Elements.

2. Click on the "Edit" link on the "Favicon" setting above the navbar element.

3. A popup window will open where you can search for an image in your hard drive to replace the default favicon image. Click on "choose file" button and search for your favicon (it should have the .ico extension) - then click on "Save".

4. Now you should see your own favicon instead of blogger's default favicon.

Don't worry if it won't appear immediately. It may take some time until your new favicon will show in your Browser's tab or window.

If you want to add animated favicons to your Blogger blogs, then you should follow another method.

How to add an animated favicon in Blogger

1. Log in to your Blogger account > Design > Edit HTML > check the "Expand widget templates" box

2. Search (CTRL + F) for:

<b:skin>

3. And just above it, paste this code:

<link href="your-favicon-links-goes-here" rel="icon" type="image/gif"/>

See the screenshot for more details

Note: replace your-favicon-links-goes-here with your favicon's link location
You can choose from here some cool favicons for your site/blog: http://www.favicon.cc/ (just download the favicon you like - upload it on tinypic or on a blogger's post, then copy the link address/direct link)

4. Save the Template.

Now your favicon should be alive. Just view your blog to see it in action (:

How to number comments in Blogger/BlogSpot

In the last tutorial i showed you how you can add a comment bubble to blogger posts titles. But this Blogger hack will add numbers with a cool speech bubble in all the comments in your blog. Each number will be linked to that comment so that you & your readers can use these numbers and corresponding links to mention or point a particular comment on any of your posts.

This works only with previous blogger commenting system, therefore if you want to add this hack, you should first remove Blogger threaded comments. Learn here How to remove Blogger threaded comments

UPDATE! Now you can add comment bubble to your threaded comments too. Please read this post: Numbered Comments On Threaded Comments for Blogger/Blogspot

So let's start adding numbered comments on our Blogger/Blogspot blog

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Now find (CTRL+F) this code in the template:

<b:loop values='data:post.comments' var='comment'>

Step 3. Immediately above/before that, paste this code:

<script type='text/javascript'>var CommentsCounter=0;</script>

Step 4. Now find this code:

<data:commentPostedByMsg/>

Step 5. And immediately below/after it, paste this code:

<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

Step 6. Find (CTRL+F) this code in the template:

</head>

Step 7. And immediately above/before it, paste this code:

<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOrMZxECI4csgXZx_oTRaeXsiaFEslYB50G_E_pRK2TlbBQM0gze1TmwwnfFrbjOj_mPHdwNIxyfrhBfdPA9Iz5riAFuxVU8RobqpjN0Zqf-zfzYSHBzgfUty6KzlBTfKw66XHHAH8LI2P/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>

Settings:
To change the image, edit the red code above
To change the color of the numbers, edit the code in blue

Images you may use (right-click on the desired image and select "Copy Image Address/Location"):

how to blog

IMPORTANT: You may use any image instead of the one linked in the code above (STEP 7), but you have to mention its dimensions correctly (width and height) for correct placement of numbers on the image.

Step 8. Finally save the template... and enjoy your comments :]

Monday, April 16, 2012

How to Add A Comment Count Bubble To Blogger Post Titles

Having a comment count bubble to each blogger post titles makes your blog more attractive. This improves not only your comments count but also allows your visitors to see what are the most popular posts on your blog. If a post has more comments then it will show the popularity of posts to your readers and visitors. So let's start adding this feature to your blog post titles by displaying the total count of the comments for your Blogger posts:

Step 1.

If you are using the old Blogger interface:

Go to Dashboard - Design - Edit HTML - Expand Widget Template (make a backup)

If you are using the new Blogger interface:

Go to Dashboard - Template - Edit HTML - Proceed - Expand Widget Template (make a backup)

Step 2. Find (CTRL + F) the following piece of code in your template:

]]></b:skin>

Step 3. Place this code just above ]]></b:skin>:

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPlp-Y00_sIpQerGWN6olaQxmIO-U57_BNaxTduTSPtrptKkj6pEodEPo5R3AR6Zaxtk-vGwVv9kG6f9A-hRjsbFp0MZRLy_SdGhMRD3gkqFHUrq31EapZ8_7hs_K_XKFcvN8teKCei6c2/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Step 4. Now find the below code:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

Note: If you can't find it, search this code instead:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>

Step 5. Add this code immediately after it:

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Note:
- to change the color of the comments number, replace #ffffff with the hex value of your color;
- to change the font size, increase/decrease the 18px value;

Step 6. Now Preview your template and if everything is ok, Save the Template.

You can choose one of these images below (Right click on the desired image and select "Copy Image Address/Location" - paste it instead of the red code from step 3)

bubble comment count, bubble blogger posts

bubble comment count, bubble blogger posts

Enjoy (:

Didn't find what your were looking for? Then you might be interested in this tutorial:
Display post author, date, labels and comments with icons below post titles

Saturday, April 14, 2012

How to Add Different Backgrounds In Blogger Pages

In the last tutorial i've talked about how you can add different backgrounds in Blogger posts. Now you might have wondered if you can have a different background for each page, thus giving your pages their own unique look. Good news! You can! And this tutorial will show you how to do it.

See this tutorial in action on my Demo Blog. Click on the Demo Page and Demo Post1 links in the navigation bar and see how they have different backgrounds.

SEE DEMO

How to Add Different Background In Blogger Posts/Pages

1. Log in to your Blogger Dashboard, then go to Design > Edit HTML.

2. Check the "Expand Widget Templates" box.

3. Search (CTRL + F) for this tag:

</head>

4. Just above the </head> tag, paste this code:

<b:if cond='data:blog.url == "http://POST-OR-PAGE-URL.html"'>
<style>
body {
background-image: url(http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

Note:

Change: http://POST-OR-PAGE-URL.html with the URL address of your blogger post or page where you want the custom background to appear.
Change: http://DIRECT_LINK_TO_BACKGROUND_IMAGE.com/IMAGE.JPG with the direct link of your background image.

Now click SAVE TEMPLATE and you're done !

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

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:

blogger posts color, backgrounds, blogger tricks

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.