Many of you have seen style boxes for wordpress and you might want to use that for your blogger blog.There are many advantage of using it in your blog. You might want to read my Optimize Your Blog Post for Reader “To Read”.

I am not sure if anyone have did that before, but here is what I found if you want to apply for your blog. Here is demo for what it will look like.

Main CSS code for <P> class

First thing you need to do is to log in into your blogger account and go to Design >> Edit HTML

Find:

]]></b:skin>

and copy below CSS code before it and save.

.post p {
 line-height: 15px;
 margin: 0;
 padding: 10px 10px 10px 49px;
 font-weight:bold;
}

CSS code for Note, Alert, Important and Link style box:

.note {
 background: url("http://1.bp.blogspot.com/_b0xJ7qk6DTc/THN2HRiC6ZI/AAAAAAAAA5Y/I-iDgA7kXto/s1600/notebook.png") no-repeat scroll 7px 50% #E3F0F2;
 border: 1px solid #66CCCC;
 display: block;
 width: 85%;
}

.alert {
background:  #FDB813 url("http://img690.imageshack.us/img690/1831/alertl.gif") no-repeat scroll 7px 50% ;
border: 1px solid #66CCCC;
display: block;
width: 85%;
}

.important {
background:  #d5d5d5 url("http://img607.imageshack.us/img607/1305/infowi.png") no-repeat scroll 7px 50% ;
border: 1px solid #66CCCC;
display: block;
width: 85%;
}

.link {
background:  #AFD775 url("http://img805.imageshack.us/img805/1363/linkn.png") no-repeat scroll 7px 50% ;
border: 1px solid #66CCCC;
display: block;
width: 85%;
}

Don’t forget to save template.

Using Box in Post

This is code you need to put in your post editor.

<p class="note">Testing note part</p>

<p class="important">Testing Important part</p>

<p class="alert">Testing Alert part</p>

<p class="link">Testing Link part</p>

You can create as many as you want for different type of box. There is no limit. You just need to use different type of CSS code.

If you need more help, just leave it in comment and I will get back to you ASAP.

Tagged as: Blogger, Blogger hacks, CSS, Hacks, Tricks