With this tutorial we will be able to add colorful message boxes in blogger posts.After the customization we can get similar type of message boxes with our own custom icon. 
This is very simple customization and also a cool way to display important messages ,notices or any special info.
Step 1: Go to blogger.com and from the Dashboard select the blog you want to edit. Click on Layout --> Edit HTML.
Step 2: Select "Expand Widget Templates". Step 3: Search for the following: .status-message {<br />[/code]
and just before it paste the following:
[code lang="css"]<span style="font-size:85%;"><span style="font-style:italic;">.ct_special{</span><br /><span style="font-style:italic;"> border:solid 1px #DEDEDE; </span><br /><span style="font-style:italic;"> background:#FFFFCC url(http://kaushik259106.googlepages.com/circle-red.png) 5px 5px no-repeat;</span><br /><span style="font-style:italic;"> color: #461B7E;</span><br /><span style="font-style:italic;"> padding:4px;</span><br /><span style="font-style:italic;">font: italic sm</span>all-caps 900 12px arial<br />}</span></div> 
Save the template. The customization is done! So now when ever we need to post any message just create a new message and use the following style to write. Example: Say our message is: Hello hi this is classic tutorial blog! so we shall post is as follows:
<div class="ct_special">Hello hi this is classic tutorial blog!<br /></div><br />Remember to put that div name and you should see the changes.. If you can edit a bit more you may get more surprising results some thing like shown below.
To change the icon displayed just change the url as required for the tag
<span style="font-size:85%;"><span style="font-style:italic;"> </span></span><span style="font-size:85%;"><span style="font-style:italic;">background:#FFFFCC url(http://kaushik259106.googlepages.com/circle-red.png) 5px 5px no-repeat;<br /><br /></span></span>And to learn more you can always head to http://www.w3schools.com/css/css_examples.asp and make your hand dirty!