Add customized message box in blogger

Kaushik On January - 3 - 2009

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 />

and just before it paste the following:

<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:

&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 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>

For those who dont know: This type of coding is called CSS styling. And to learn more you can always head to http://www.w3schools.com/css/css_examples.asp and make your hand dirty!