Add a line to separate Blogger sidebar widgets

This tutorial shows you how to add a line between the widgets in your sidebar. This can only be altered in the template code, or by adding some css using the Template Designer. I do not advise you alter it directly in the html code unless you know what you’re doing. Always use the Template Designer if you can.
Note that the html directions were written for the new Simple template, but should be transferable to most of the other template styles too.

Location of the sidebar

Sidebar widgets after adding separating line

Add a line in the Template Designer

1. From your blog’s home page, click DESIGN in the top right corner

2. Click CUSTOMISE button (underneath the preview of your blog). This opens up the Template Designer

3. Click ADVANCED – in the list at the top left corner of the screen

4. Click ADD CSS – in the second list at the top left corner of the screen

5. Copy the following css code and paste it into the box which says ADD CUSTOM CSS

.sidebar .widget {
border-bottom: 1px solid #000000;
}

6. Alter the line thickness by changing this value, alter the line type by making this text say solid, dashed or dotted and change the colour by making this value whatever hex colour value you would like. You can see a hex colour generator here – just pick a colour and it generates the colour number.

7. Click APPLY TO BLOG

Adjust widget space on the html template

1. From your blog’s home page, click DESIGN in the top right corner

2. Click EDIT HTML button (underneath the preview of your blog)

3. Click PROCEED

4. Type CtrlF to bring up the search box

5. Search for the following code */Widgets

6. In the section of code which you are taken to, add this code to the bottom of that section of code (you can just copy and paste this)…

.sidebar .widget {
border-bottom: 1px solid #000000;
}
Truthfully, the code could go almost wherever you choose in that part of the template, but I like my code to go in logical places :)

7. Alter the line thickness by changing this value, alter the line type by making this text say solid, dashed or dotted and change the colour by making this value whatever hex colour value you would like. You can see a hex colour generator here – just pick a colour and it generates the colour number.

8. Preview and save

Note: You should always back up your blog before you make any changes. Louise Franks Designs is not responsible for anything bad which happens when you try to alter your template code! If you found this post useful, or know somebody who would like it, please share it or “like” it.


http://louisefranksdesigns.com/2013/01/add-a-line-to-separate-blogger-sidebar-widgets/