How to add a border around every blog post

Sunday, April 19, 2015

How to add a border around every blog post

This tutorial will show you how to add border with curve corner to each of your blog posts. The process is very simple it is all about adding some lines of codes to your template. However one can also change the background color of the post body by following this tutorial. I have found it very handy to give a perfect look to my post so that reader like my post from all aspects like quality and looks. Since it was helpful for me so it might also be helpful for you, keeping this mind i bring this tutorial to you. So read it carefully and give a perfect look to your posts.


Live Demo


Follow the following steps:

1) Go to Template------Edit HTML-------Expand Widget Templates
2) Search for]] ></b:skin> by pressing Ctrl+F
3) Now paste the following codes just above]] ></b:skin>


.post{border:1px solid #E5E5E2;border-style:solid;border-radius:10px;
-moz-border-radius:10px;-webkit-border-radius:10px;background:#ffffff;margin:.1em 0 .5em;padding:0px 8px 0px 8px}

4) Now click on Preview and then Save Template



Customization

1) To change the border color replace #E5E5E2 by your color code.
2) To adjust the border corner curves change 10px to your desired value.
3) To change the post background color change #ffffff by your color code.

0 comments:

Post a Comment