Dawn by Design

So I was going through some of the new requests submitted, and someone asked for a tutorial on how to add a post divider using the new templates.  So I did a little digging looking for a tutorial and I came across Dawn by Design’s Blogwear Tutorials.  The tutorials that she had were great, so I went ahead and just listed some of them on my Blogger Tutorial Page.

Dawn by Design | Digital Goodness for Scrappers & Bloggers
Here is a list of the tutorials that I added to my directory:
Adding a blog header in Blogger (tutorial by Dawn by Design)
Adding a post divider image in Blogger – New Templates (Tutorial by Dawn by Design)
Customizing template colors in Blogger (tutorial by Dawn by Design)

DIY Custom Blog Design Part 7: Post Divider

This is Part 6 of a series of tutorials, if you need to start at the beginning, click here.

In this portion of the tutorials, I will show you how to make and add a post divider to your blog.  First you need to determine what size you need to make your post divider.  To do that, go to your Edit HTML page and scroll down to your #main-wrapper and you will see your width there.

My width was 540px, so I went ahead and made my post divider 540x75px.  I made the post divider the same way that I did my header in the header tutorial.

To install your post divider, you need to upload it to photobucket and grab your direct link code.  Then head over to your Edit HTML page and find this section:  .post {

First, add these lines:
  background: url(Your Direct Link Code Here);
  background-repeat: no-repeat;
  background-position: bottom left;

Second, delete this line:
  border-bottom:1px dotted $bordercolor;

Third, change your padding-bottom to suit your post divider, I changed mine to 4em, but if you have a taller post divider, go with a larger number.  You may just have to play with it a bit.

Your final code should look something similar to this:

Thats it!!