the.kaushik
œ∑´®†¥¨ˆøπåß∂ƒ©˙∆˚¬Ω≈ ç√∫˜
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!
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!
