How to: Add a Decorative Post Divider

The following tutorial will assist you in adding a post divider to your own blog. Post dividers serve as a decorative division between each blog posting.

Post dividers are easily installed through the Template Designer area of your Blogger blog, by inserting a small snippet code into the Add CSS area. 

1. Before you begin you'll need to select a post divider image to use on your blog.  If you've purchased one of my blog themes then you'll already have access to that code.

  a.) Each post divider image has the complete code listed below the image. You will use that code to install the post divider image on your blog.  I suggest copying the code and temporarily pasting it to a text file on your computer ~ if you're using a Windows PC then a "Notepad" document is a good choice for that. This makes the process easier and less confusing.

  b.) In the example below I will be using the Whispers of Spring post divider and here is what that looks like on the page....

410 wide image and code

.post{margin: 0 0 40px 0; width: 90%; background: url(http://www.prl-images.com/images/post_dividers/PrL-FncflFly-divider-x410.png); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:4.5em; }

 
c.) To install a post divider we will use the code found below the image example, rather than the image itself.  I will copy the entire section of code above onto a Notepad document and leave it open for use a little bit later on.  Now let's move on to installing the code onto our blog...

2. Begin by logging onto your blog and navigating to the "Template" area...

3. Next, click on the "Customize" button to the enter the Template Designer area of your blog...

4. At the bottom of the left side menu, click on "Advanced"...

5. Now scroll down the inner menu selections until you see Add CSS and click on that....

6. This will bring you to the CSS area of your blog...

7. If you previously added other CSS changes to your blog then you may see some code appear in this section.  In the example below, I have a snippet of code already inserted to center my banner...

If this is the case on your own blog them be sure to leave that code as is, do not remove it.  We are simply going to add an additional bit of code below, so be sure your mouse is positioned below any pre-existing code.

8. Now, copy the post divider code and paste it into the "Add custom CSS" area ~ again, being sure to paste it below any preexisting code/s...

.post{margin: 0 0 40px 0;
width: 90%;
background: url(http://www.plumroselane.com/image.png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:4.5em;
}

The part shown in red is different for each image so I've made that a generic link in the example above.  You won't have to make any changes to the code, as long as you're using one of my post divider.

9. In my example the code now looks like this...

10. With the code now in place you can now preview how the post divider image will appear. To do this, use the lower scroll bar on the right side to scroll down the sample view of your blog...

13. Continue scrolling down until you see the example post divider appear...

If an example does not appear then double check to be sure you copied and pasted the entire code into that CSS area.  In some cases the post divider may not show up. If this is the case the I suggest backing out of the Template Designer, do not save any changes, and start over again.  Please remember that if you've previously installed a post divider you will have to remove that code before trying to insert a new one.

14. With everything set, simply click the "Apply to Blog" button to save your changes...

Adjusting the space around your post divider: If  you find the post divider image appears to be cramped in under the bottom of your posts then you can change the last number on the bottom line of the code to a higher number.  This adjusts the margin between your posts and the post divider.  Changing the number to a higher number, like 5.5, 6.5 or 7.0 will add more space between your blog posts and the post divider image.

Enjoy!