How To Add Stylish Border Around Every Post Of Blogger?

Some time your template is so simple that it can not attract visitors, so you have to spices up your blog, but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding. If you want to add borders you can also use this code, There are many different type of codes given below. One of the major parts of web designing is make a design as clear as possible in terms of usability. For example, the reader should be able to easily identify that this is a sidebar and this is main column where all your posts are displayed. Normally all the Blogger posts are in a single big box with just a border at the bottom of each post on homepage…

That border is used to make the reader aware that the next post is a separate post.That is actually a very normal and basic way to separate the posts. Today we are going to make the posts more clear for the reader by displaying each of them in a stylish separate box or you can say section or a block. We are just gonna take a basic style and you can obviously make your own style out of it. The main thing is you will learn how to do it so that you can customize it more. We know that most of you may know how to do this but there are even several newbies waiting to learn some basic tricks So here is for them…

Before

After

Features:

1.) Make Your Blog Attractive.
2.) Increase Your ReaderShip.
3.) Make Your Template Awesome.
4.) Simple, Easy To Install And Quick To Load Code.
5.) Pure CSS Code.
6.) 6 Different Type Of Style Code Added.
7.) You Can Also Add Image To Your Post Backgroung.
8.) It Will Remain On All Pages, Post.
9.) Just Add A Little Code In Your Template.
10.) Totally Change Your Blog Design In An Awesome Way.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Check On “Expand Your Template” .
5.) Click “CTRL+F” And Find ]]></b:skin>
6.) Now Copy The Below Code And Paste It Before ]]></b:skin>.
7.) Click Save, Now You Are Done.

For Simple Square Color Border:-

.post.hentry {
padding: 5px;
border: 1px solid  #ff0000;
}

For Simple Square Color Border With Filled Background:-

.post.hentry {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
}

For Simple Square Color Border With Filled Background And Shade:-

.post.hentry {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}

For Simple Rounded Color Border:-

.post.hentry {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
}

For Simple Rounded Color Border With Filled Background:-

.post.hentry {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
}

For Simple Rounded Color Border With Filled Background And Shade:-

.post.hentry {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}

Customization:

1.) Just Change CSS With Your Desire And Wish…
2.) Save And Done..