Scrap a post separator

We have a winner in my recent poll! 81% voted to learn how to create an image as a post separator. To the best of my ability, here are the directions! As always, if you have any questions, please feel free to ask!

Creating a POST SEPARATOR
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.

.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="separator"></div>

Save Template. View Blog.

Here are the WORD DOCUMENT INSTRUCTIONS.

Here’s to more happy scrapping, and
Hugs from the heart,
Jeanette