How To: Add Post Dividers

Another way to add a bit of flair to your blog is to have a post divider image. This is a thin, horizontal graphic that separates your posts instead of just a line. It adds another level of personality to your blog, and can make your space seem more put together.

You can see what my divider graphic on Fox + Hazel looks like below:

First, you need to find or create a divider image that you like. Choose something that is noticable, but not so flashy that it distracts the readers eye.

Here are a few free resources you can use:

IROCKSOWHAT - 1 & 2 & 3

Sweetly Scrapped 1 & 2

MeinLilaPark

Make sure your image is the same pixels wide as your posting section of your blog. To find out how wide your post section is, go into the Template section and click on Edit Html. Search for "main-wrapper" (without the quotation marks.) This is how wide your images should be inside your post to fit. Make sure your divider is the same width. If it's too wide, it will hang over into your side bars. It's best to have an exact fit, but you can air on the side of too small to be safe. You can use Picmonkey to re-size your image if needed. You can also do this within Photobucket.

Take that image and upload it your photo hosting site of choice. I'm a Photobucket user, so mine is uploaded there.

Next, go into the layout section of your blog and click Add a Widget. Next find the Html/Javascript widget and click on it.

Copy & paste this code into that box:

<style type="text/css">.post {

background: url(YOURURLHERE) no-repeat;

background-position: bottom center;

margin:1.5em 0 1.5em;

border-bottom: none;

padding-bottom: 3.5em;}

</style>

Where it says YOURURL, paste the direct URL for your image from your hosting site. If you are using Photobucket for example, then find the direct link for your image from there and replace it.

Click Save. Your widget doesn't need to be anywhere specific in your side bar as it won't show up there because the HMTL is affecting the blog posts and nothing in your sidebar. I personally keep all my HMTL widgets on the bottom left hand side just to keep it organized.

Now view your blog and see your magical work! Amazing right? Now your blog is just a teeny bit more custom and a whole lot snazzier looking! Simple things like a post divider can help set your blog apart from all the others floating around in the blogosphere - and of course you want to be set apart, right? ;)

If you have any questions, please ask away! We'll try our best to answer them =)