CSS HACKS : How to Add Lines And Box Border To Blogger Template

   

Now if there is something quite as dear to me apart from blogging is the fact, I get to design my blog and add some changes to it every now and then. And one of the best ways to break things in a blog template is by adding lines, it gives a more clear perspective of what is what. You can go as fancy as you want with stylish borders or graphic images, but I absolutely love the minimalistic style, its classic and can be a quite pleasing and professional looking when it comes to building a blog design. 

Here are all the possible CSS codes that you can implement on the side bar of the blog template to give each widgets its own share of highlight. I will be doing a second part of this on how to add lines to the blog template series, where I will share with you how you can add lines on the main blog post area, but for today lets stick to the side bar.

Adding Line Above The Sidebar Widget Title :

All you have to do is go to – Template – Customize – Advance – Add CSS and paste the following code :

.sidebar h2 {

border-top: 1px solid #000000;

padding: 10px;}

You can customize this code with your own choice of color by editing the color code (#000000), Border-style by editing Solid ( you can change it to double, dotted, dash) and of course the width by changing the value 1px – to balance it with your blog theme.

Adding Lines Below The Title :

Copy and paste the given code below, in the CSS box (again you can customize it) :

.sidebar h2 {
border-bottom: 1px solid #000000;
padding: 10px;}

Adding Lines On Either Side Of The Title :

Now I have literally struggled to get this right, but here is a simple way to do it, how ever this might not be a full proof method and may create problems when it comes to adding lines on either side of a long title name, in that case you would want to think of a title name that is something short and sweet, if you want to make this code work.

And if you want a fool proof way to add this code you can go check out this tutorial by xomisse.

.fancy h2: :before, .fancy h2: :after {

content: “”;

position: absolute;

border-bottom: 1px solid #000000;

border-top: 1px solid #000000;

top: 10px;

width: 100px;

}

.fancy h2: :after {

left: 100%;

margin-left: 1px;

}

.fancy h2: :before {

right: 100%;

margin-right: 1px;

}

.fancy h2 {

display: inline-block;

position: relative;

}

.fancy {

text-align: center;

}

Border Around Side Bar Title :

Paste the following code in the CSS Box :

.sidebar h2 {
border: 1px solid #000000;
padding: 10px;}

Border Surrounding Each Individual Widget :

Paste the following code in the CSS Box :

.sidebar .widget {
border: 1px solid #000000;
padding: 10px;}
  

Border Surrounding The Entire Sidebar :

Paste the following code in the CSS Box :

.sidebar {
border: 1px solid #000000;
padding: 10px;}

Hope this was helpful, if you like editing and playing around with your blog template as much as I do. And in case you are looking for affordable blogger blog templates you can find some here here and here.

Share: