Add a Divider (line) between Sidebar Elements in Blogger

November 13, 2008

We've already talked about Divider between Posts in Blogger. Now, we're gonna make a divider in our Sidebar, which will separate elements, and distinguish them.

There are two options here:

• we can customize the existing divider (border) in Blogger, which, in fact, is the LINE (border)
• or we can place our own custom image (picture) as a divider

OUR CUSTOM IMAGE (PICTURE) AS A DIVIDER

First, you should have picture that you want to use as a divider. It can be anything, create one yourself, download from web.....(a flower, some lines, spoon....whatever you like).
You should take care of dimensions. Picture has to be the same width (better a little bit less) as your Sidebar section (so it doesn't get cropped).
Upload your picture on a free web host like Photobucket, Picasa, TinyPic...

Ok. You've got the pic. Back up your template, then go to:

DASHBOARD --> LAYOUT --> EDIT HTML, using CTRL (Option) + F, find the following part of code:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...now, we have to split that code in 2 parts, so it will look lake this:

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...we've just separated ".main .widget" and ".sidebar .widget". Next is adding the picture in the ".sidebar .widget", so it will look like this:

.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(http://i33.tinypic.com/34eq9sl.jpg);
background-position: bottom;
background-repeat: no-repeat;
}

• we've added the part in orange, and changed default border to "0px" to make it invisible...
• notice the part in blue: we've also added some "padding" (little bit more than your image height is good)
• in red, you can see the URL of pic used for this tutorial. Replace it with URL of your hosted picture...

So the result is this:

NOTE:

• tutorial is done in Minima Blogger template, so your code may differ a bit, but the idea is the same
• you can also use this divider if you want....

CUSTOMIZING THE EXISTING DIVIDER (BORDER) IN SIDEBAR

This is much faster. And easier. But also, the result is more simple. All you have to do is to find this part of code in your code section (LAYOUT --> EDIT HTML):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...and (in orange) change the "styles" of the border (width, type, color). You can check "styles" in article "Borders in Blogger"....

Smile!