HOW TO ADD LINES TO YOUR BLOG DESIGN: THE CHEAT SHEET

Adding lines to a template changes the flow of the page. It's breaks up each section of information and gives your eye a clear understanding of what's what. Style lines aren't for every design. A more minimalist approach works better for some templates, but if you're like me and you want to play around to see what you can create, I've got a little cheat sheet for you. Below I've listed how to add lines or borders to pretty much every section of your blog possible. Hope it helps, and remember, this is for Blogger, not Wordpress.

Lines In The Sidebar Section

---

Line between your posts and your sidebar:

 The easiest way to do this is to go into your dashboard and go to Template > Customize > Advanced > Separator Line Colour. You can change the colour from there.

---

Above widget titles:

This time go to Template > Customize > Advanced > Add CSS. Paste this into your Add CSS Box:

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

---

Below widget titles:

Paste this into your Add CSS Box:

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

---

Surrounding widget titles:

This is a little more complicated than simply adding CSS. I've got a whole tutorial on how to do it here.

---

Border around widget title:

Paste this into your Add CSS Box:

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

---

Border around entire sidebar:

Paste this into your Add CSS Box:

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

---

Border around each sidebar widget:

Paste this into your Add CSS Box:

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

Lines In The Post Section

---

Under post date:

Paste this into your Add CSS Box:

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

---

Under post title:

Paste this into your Add CSS Box:

h3.post-title {
border-bottom: 1px solid #000000;
padding: 10px;}

---

Above post header:

Paste this into your Add CSS Box:
*this is assuming that you date is listed before your post title.

h2.date-header {
border-top: 1px solid #000000;
padding: 10px;}

---

Surrounding post title:

Same thing as before, this isn't as simple. Follow the Xomisse tutorial on how to do this.

---

Below post footer:

Again, the easiest way to do this is to go into your dashboard and go to Template > Customize > Advanced > Post Footer. Remove the background colour of the footer and just set a shadow colour.

---

Add a border around your jump link:

Paste this into your Add CSS Box:

.jump-link a {
border: 1px solid #000000;
padding: 10px;
}

Just in case you haven't centered you jump link yet:
.jump-link {
text-align: center;}

---

*go ahead and change the padding (padding:10px) and the colour (#000000) of the borders to whatever floats your boat.