Update-Post Separator

Creating a POST SEPARATOR This is an update of the post found HERE. This may be a good solution if you have your photos overlapping each other and not holding their space in the blog.

Requested by Sam at Ryemilan and Janick at KarateChickScraps

Several people were having trouble with the code in the previous post so I looked into and there was some chatter about using the word separator too many times in the code, so I changed it to post-separator, and so far it has worked beautifully. If your current post separator is working as is, then there should be no need to change it. Well, here it goes:

Step 1 - Create and upload your image
Create an image (GIF, JPG or PNG). My POST SEPARATOR is in PNG format, because I prefer the transparent background. Make sure your images are no larger than the following:
400 x 50 pixels (96 dpi)
Upload your finished image to your favorite photo hosting site and get the direct link code. Save it for later.
Step 2 – Backup your blog template.
You can find directions to do that here.
Step 3 – Delete the dotted lines between posts.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and use your CTRL F (hold the control key and the F key together) to FIND the word dotted, and delete it. You should find the word twice in your code. Preview to see if the dotted line between posts is gone. Click Save Template.
Step 4 – Change your HTML code.
Go to CUSTOMIZE/LAYOUT/EDIT HTML and look in the * / Footer section for a piece of code that has ]] > </b:skin> in it. You will place the following code with your image link in it right BEFORE this code, and after the } symbol. See the following screen shots.

.post-separator {
background-image: url(LINK OF YOUR IMAGE);
background-repeat: no-repeat;
background-position: center center;
height: 50px;
padding: 4px;
}

Click Save Template.

Step 5 – Change your HTML code again.
This has to be two separate steps. I’ve tried to make it one step and it doesn’t work. Make sure you click the EXPAND WIDGETS box, or you will not be able to find the code.
Find this part of your code in your HTML:
<p class='post-footer-line post-footer-line-3'/>

The fastest way to find it is to hit the CTRL and the F (FIND OPTION) to open a search box to find what you need in your code. You can search the number 3 to find it. There are a lot of 3’s so make sure you find the code in its entirety.

Paste the code below immediately AFTER the this line :

<div class="post-separator"></div>
Save Template. View Blog.

Find the Word Document Instructions HERE.