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.
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]
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"]<div class="ct_special">Hello hi this is classic tutorial blog!<br /></div><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.
[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!



Keep posting stuff like this i really like it
it’s really help. I should try this on
<a href=”http://www.softarea.in/”>It’s Really Good To help</a>