Add Stylish Box for Blogger post to Quickly style blog post

Thesis theme is one of the best WordPress Search engine optimized  theme.Thesis Style Box plugin allows you to Quickly style your Headings in a single  post .In this post I am going to tell you “How to use Style box plugin for blogger posts”.This customization is purely based on CSS and it is very simple to install on Blogger.This plugin will surely make your blog very attractive.

Demo:

Notes

Alert

Help

Important Notes

Tips

Windows

Linux

To use this plugin you have to add the following CSS code.
1) Login to your Blogger dashboard –> Design tab –> Edit html.
2) Search for following code:

]]></b:skin>

3) Paste the following code above the ]]></b:skin> tag.

.notes { background-image: url(http://i55.tinypic.com/2lkb24p.jpg);
color: #000000; background-color: #E3F0F2;
background-repeat: no-repeat; border:1px solid #66CCCC; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.alert { background-image: url(http://i53.tinypic.com/4jntr6.jpg);
color: #000000; background-color: #FFFFA0;
background-repeat: no-repeat; border:1px solid #EAE061; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.help { background-image: url(http://i56.tinypic.com/taggv8.jpg);
color: #000000; background-color: #CCFFFF;
background-repeat: no-repeat; border:1px solid #61B8FF; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.impnotes { background-image: url(http://i52.tinypic.com/whmexj.jpg);
color: #000000; background-color: #159EC7;
background-repeat: no-repeat; border:1px solid #5EB4A7; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.tips { background-image: url(http://i55.tinypic.com/w7hkj8.jpg);
color: #000000; background-color: #E66C2C;
background-repeat: no-repeat; border:1px solid #BC4123; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.windows { background-image: url(http://i53.tinypic.com/21bp2tf.jpg);
color: #000000; background-color: #B4D362;
background-repeat: no-repeat; border:1px solid #688965; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

.linux { background-image: url(http://i55.tinypic.com/4ihb0g.jpg);
color: #000000; background-color: #FECF32;
background-repeat: no-repeat; border:1px solid #201F1F; font-family:Georgia; line-height:1.4em; -moz-border-radius:5px; padding:0.9em; -webkit-border-radius:5px;  list-style:none; margin:5px; font-size:12px; text-indent: 30px; padding-right:40 }

How to use this plugin.

After typing the post Go to Edit html tab and Enclose the heading with anyone of this tags:
<div class="notes">Your heading </div>
<div class="alert">Your heading </div>
<div class="help">Your heading </div>
<div class="impnotes">Your heading  </div>
<div class="tips">Your heading  </div>
<div class="windows">Your heading </div>
<div class="linux">Your heading </div>

If you like this post or if you find any bug, Please feel free to share your opinion here.