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:
[code lang="css"].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>[/code]

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:
[code lang="html"]&lt;div class="ct_special"&gt;Hello hi this is classic tutorial blog!<br />&lt;/div&gt;<br />[/code]
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
[code lang="css"]<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> [/code]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!

Posted in , · Tagged: ,