Blogger Tutorial: Add customized message box in blogger

the.kaushik · 04-01-2009, 03:12 PM

Hi Guys,
I wrote this tutorial yesterday. This is about adding beautiful message boxes in blogger with a bit of customization. Check the image below.. Something like this.

OR for a live example you can follow my blog post at http://classictutorials.blogspot.com...n-blogger.html

Here are the steps you need to follow:
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 {

and just before it paste the following:

.ct_special{
border:solid 1px #DEDEDE;
background:#FFFFCC url(http://kaushik259106.googlepages.com/circle-red.png) 5px 5px no-repeat;
color: #461B7E;
padding:4px;
font: italic small-caps 900 12px arial
}

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

Thanks for reading the tutorial! Hope you like it. If you like this tutorial please post comment in my blog also! Thanks a lot.
You can ask me if you need any help for customization!