How to: Add a 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. To view a selection of my coordinating post dividers click here.

To use this tutorial you will need to work in the html code area of your blog. For this reason I strongly recommend backing up your blog template before proceeding. To do this Log into your blogger account and navigate to the "Design" area of your blog.

Click on the "edit html" link, then click on "Download Full Template" to save a copy of your current template to your computer. You are now ready to proceed with the tutorial...

In the same html area scroll down through the html code until you find...

.post

this is the area that controls your post layout and style, it will contain items such as....

.post {
margin: 0 0 40px 0;
width: 90%
}

Personally I think it's easier to replace the entire code in that area with the new code so copy the following code and place it over the existing code so that it now reads...

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Now, all you'll need to do is copy and paste any of the post divider image codes into the red type area inside the parenthesis. In this example I'll use the Stormy Weather post divider so here that code:

Stormy Weather
410 wide image & codehttp://i806.photobucket.com/albums/yy344/plumrose-lane/Blog%20Backgrounds/Blog%20Dividers/PrL-StormyWeather-postdivider-410x.png

and here is how the final code will look for this post divider...

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://i806.photobucket.com/albums/yy344/plumrose-lane/
Blog%20Backgrounds/Blog%20Dividers/PrL-StormyWeather-postdivider-410x.
png);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

And that's it, click to "Save" and when you return to your blog you should now see a decorative post divider between each blog post.

If you find the post divider appears to be cramped in under the bottom of your post and your tags, try increasing the "padding-bottom: 2.5em" to a higher amount, such as 4.0 or 4.5. This will help to provide more area around the post divider image.

Enjoy!

Now all of my tutorials in one fabulous package for one low price

$10.95 buys the complete set of my digital tutorials
all 25 tutorials in PDF format ~ including my exclusive three part series

"How to Create Your Own Blog Background"

available only with this purchase.

Click the book above to purchase from my Etsy shop..