Box Border Around Each Blog Post & Side Widget|| Blog Designing Tips

It’s neat to define each blog post and side widget, less confusing and gives a very professional and classic look. 

And if you are wondering how to do that lets get into it.

Border Around Each Blog Post

1. Go to Template —- Edit HTML 

2. Search for ]]></b:skin> by pressing Ctrl+F

3. And right above that code paste the following code :

.post{border:1px solid #E5E5E2;border-style:solid;border-radius:0px;

-moz-border-radius:0px;

-webkit-border-radius:0px;background:#ffffff;margin:.1em 0 .5em;padding:10px 15px 0px 8px}

4. Preview and Save.

For Personal Customisation : 

– To change Border color replace #E5E5E2  with your color code.

– To change the background color replace #ffffff with your color code

– To have curved corners change the value of border radius:0px.

For live demo you are already seeing my blog. 😉

————————————————————————————————————————–

Border Around Each Widget On The Side Bar

Now to add box border around each side bar widget 

1. Go to template — Customise — Add CSS

2. Add the following code :

.sidebar .widget {

border:1px solid black;

padding:10px;

}

This is how it will look like :

Customise :

– To change the width of the border change the value 1px.

– You can also change the border style from solid to dotted, dashed, doubled, grooved, ridge, inset, onset. Just change the word solid with any of the above words mentioned.

– And to change the border color replace black with your choice of color code.

– Lastly padding is the space between your gadget content and border.

Hope this was helpful. And if you use this on your blog don’t forget to share your blog links would love to see .

    

Share: