DIGIT-ARC read-only archive · snapshot: July 23, 2026

Blogger Tutorial: Add customized message box in blogger

3 posts · originally from https://geek.digit.in/community/threads/blogger-tutorial-add-customized-message-box-in-blogger.105925/

the.kaushik
the.kaushik Original post #1
Jan 4, 2009 at 3: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.
*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 at 7:29 PM
not working giving error on your live demo
the.kaushik
Jul 16, 2009 at 3:39 PM
nops its working fine.. did you copied the URL? just click on the url