Adding Post Dividers.

This is the first of many tutorials I'll be putting up here at lalala designs. Let me know if you have any questions! Click on any of the images to enlarge them.

First, you'll need a divider. You can always find 5 free ones here, on our Freebies page. Otherwise, you can design one yourself, or you can custom order one here.

Once you have your divider, upload it to the image storing site of your choice. I prefer to use Photobucket - it's really easy to use, resizing things is a breeze and it's completely free. You'll need to resize that divider before you can use it. What size should your divider be? Good question. You'll have to take a look in your template code to find out. Here's how to do that.
-From your dashboard, click "Design", then "Edit HTML". In the "Edit Template" box, find the piece of code that looks like this.

Once you've taken note of that number, it's time to resize the divider on Photobucket (I'll be abbreviating it 'PB' from this point on). Upload the image to PB, then click on the "Edit" button, seen here.

Now, click on the "Resize" button, shown here in the red box.

Now, change the width to the number you found earlier in your HTML code. Make sure that the box next to "Keep Proportions" is checked. Then click the "Apply" button. Once you've completed that, click the "Replace Original" button at the bottom and you're done!

Once the divider is ready to be used, you'll need to change part of your HTML. Scary? Maybe. Difficult? Nope. It's actually really simple.
Scroll through your HTML, just like you did when you were finding the width of your blog. Look for this piece of it. You're going to be replacing it with a different piece of code.

Replace the code in the red box with this code (you can copy and paste it).

.post {
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
}

Be sure to replace the DIVIDER ADDRESS with the direct link of your image from PB. Then click "Save Template", and you're done! You can adjust the padding (the amount of space below the divider) by changing the 5.5 in the last line of the code you added.