tutorial on post divider/separator

I came across a freebie of post dividers or separators at shabbyblogs.com. I really like this one particular divider and decided to include it in my blog. I Googled on several websites for tutorials on how to apply post divider to blog. Since my blog has undergone some minor modifications in the past, the html code is all messed up and confusing for me and since I’m not one of those people who are good at coding, using logical thinking, I managed to apply the divider by combining several tutorials.

I would like to share this tutorial which is not mine but a combination of a few tutorials from other websites.
(please bear with me, I'm a beginner at this)

For those who are newbies and are not familiar with a divider, a post divider is located between two posts and separates a previous post and a current post.

First, you need a divider of your choice. You can either make one or get it at websites that offer freebies. Then, you need to save the image to your computer and upload the image at image hosting site like Photobucket.com. You have to adjust the length and height of your divider so that when you include it in your blog it will not get cropped and interfere with the sidebar.

In order to adjust the length and height of your divider;

Go to DESIGN > TEMPLATE DESIGNER > ADJUST WIDTHS

If you are using a 2 column template like me, what I did is, I subtract the width of my entire blog with the width of my sidebar. For example 730 px – 270 px = 460 px

I adjust the length of my divider to 400 px, not 460 px so that there a space between main posts and sidebar, but it really depend on your preference. Take note of the height of the divider, mine is 46 px.

Then, go to DESIGN > EDIT HTML > check EXPAND WIDGET TEMPLATES

(you may want to copy and save your html code before you begin)

Using ctrl+F, find this code;

<div class='post-footer-line post-footer-line-3'/>

Underneath it, paste this code;

<center><img height='46' src='URL OF YOUR DIVIDER HERE'/></center>

It should look like this,

All you need to do is replace ‘URL OF YOUR DIVIDER HERE’ with the link of your divider and the height is according to the height of your divider.

Preview your template and do adjustments to the length and height of your divider if you are not satisfied with the look until you do before you click on “save templates”.

Good luck and hope this tutorial help you like it help me.