Add customized message box in blogger

published on
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 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( 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( 5px 5px no-repeat;<br /><br /></span></span>
  And to learn more you can always head to and make your hand dirty!