Add customized message box in blogger

by Kaushik

With this tutorial we will be able to add colorful message boxes in blogger posts.
This is very simple customization and also a cool way to display important messages ,notices or any special info.
After the customization we can get similar type of message boxes with our own custom icon.
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 ><span >.ct_special{</span><br /><span > border:solid 1px #DEDEDE; </span><br /><span > background:#FFFFCC url(http://kaushik259106.googlepages.com/circle-red.png) 5px 5px no-repeat;</span><br /><span > color: #461B7E;</span><br /><span > padding:4px;</span><br /><span >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:
&lt;div class="ct_special"&gt;Hello hi this is classic tutorial blog!<br />&lt;/div&gt;<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 ><span > </span></span><span ><span >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!