Tutorial: How to Add Post Dividers to Your Blogger Blog

They're here! Shabby Blogs post dividers have arrived! We've started out with 16 super sweet designs to give your blog a totally pulled together look. Browse our Shabby Extras page for the perfect divider to match your Shabby Blogs background. Not sure what to do after snagging our latest blog couture? Read on for an easy peasy tutorial!

Installing your new post divider:

1. After choosing your awesome new divider and saving it to your computer, you will need to upload it to the image storing site of your choice. I'll be using Photobucket in this tutorial.


2. All Shabby Blogs dividers are 650 pixels wide. I created them in this size to accommodate those of you with wider post sections since it is easier to shrink images than it is to enlarge them. To find out what size your divider should be, log into your Blogger account and click on "Layout" and then "Edit HTML." Scroll down to where you see the code below. The circled area will tell you how many pixels wide your divider should be.
(Click on image to enlarge)

3. Okay. Now that you know that, open Photobucket in a new tab and locate the Shabby Blogs divider you uploaded. Click on "Edit" and then "Resize" as shown below.

4. Change the width to whatever the number in your code was. (The standard width for Blogger's Minima template is 410px.) After you have changed the width, click "Apply" and then "Replace Original."

5. You are about to change your HTML code...which really freaks some people out. I promise, it is not as scary as you may think. :) Still, it's a good idea to backup your template before making any changes- which, FYI, you can do just below the tabs near the top of the Edit HTML page. Take a deep breath and scroll down in your code until you get to the text shown below. Replace this:

With this:

.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;
}

6. Now replace the highlighted area shown below with the URL (or "direct link" from Photobucket) of your stored image.

That's it! See? That wasn't too hard, was it? You can adjust the spacing (or padding) of your divider by adjusting the number 5.5 in this section of code. Preview it to see what you think and make any adjustments necessary. After saving your changes, you will be left with something similar to this:
Awesome, right? Way to go, you! :)


PS. You can also use our dividers as a footer for your blog! After saving it to your computer, just add it as a photo gadget to the bottom section of your blog like this:
PPS. You can also add your own text to our post dividers so it's a combination signature/divider as I have done on this blog. :)