# Blogger Tutorial: Add customized message box in blogger



## the.kaushik (Jan 4, 2009)

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.
*img57.imageshack.us/img57/1231/yellowmessageboxze1.png
*img57.imageshack.us/img57/yellowmessageboxze1.png/1/w409.png

OR for a live example you can follow my blog post at *classictutorials.blogspot.com/2009/01/add-customized-message-box-in-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(*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!


----------



## ritesh.techie (Jul 15, 2009)

not working giving error on your live demo


----------



## the.kaushik (Jul 16, 2009)

nops its working fine.. did you copied the URL? just click on the url


----------

