How to Make and Add a Post Divider (Simple Template)

Customizing the Simple Template - Part 3



Do you want a post divider for your blog but you are afraid to edit the HTML? If you answered yes, then this post is for you. In a previous post I showed you how to create a post divider like the one you see below:

My previous instructions showed you how to add the divider if your template is already set to the Minima template. This post will give you instructions on how to add the divider if your template is set to the Blogger Simple template. Follow Part 1 of my Simple Template Tutorials to set your template to the Simple template.

Let's get started!

 These first part of these instructions are exactly like my previous post divider tutorial found HERE. Follow these instructions all the way until it tells you to edit the HTML. Do NOT click "Edit HTML". 

In other words:
A.  Create the graphic using the tips at the beginning of the post divider tutorial. (If you need more help on creating a graphic, see my tutorial on creating your own blog button.) 
B. Then upload your graphic to Photobucket or another image hosting site of your choice. (This is Step 1 under "How to put it on your blog" on the post divider tutorial.)

Once your image is uploaded to Photobucket or a similar site, follow these instructions to put the image on your blog.
 1. Login to your blog and click on the "Design" tab. From this tab, click on "Template Designer". (If you have updated your blog to the new Blogger interface, you will see this:

 

Click on the down arrow that I have circled and choose "Template". From the next screen, choose "Customize", the orange button in the middle.)

2. You should now be in the "Template Designer", (screen with a gray background and a preview of your blog on the bottom). 

  a. From the options on the left (starting with "Templates"), choose "Advanced".

  b. Then from the second list of options, scroll down to the bottom and choose "Add CSS".

  c.  In this box that appears to the right, you will paste your CSS code that I will explain next. Here is a picture of what you should see:

3. In this box, enter the following code:

.post-footer {

background:url(YOUR DIRECT LINK) no-repeat center;

height: 215px;

margin: 20px 0px -50px;

padding: 5px 10px;

}

Where it says "YOUR DIRECT LINK", you will enter the url/direct link of your image from your Photobucket Account. 

*The height I chose here was relative to the height of my image. This measurement may be almost double the actual height of your post divider image. This allows for blank space between the text on your blog and the divider. 

4. Before you hit "Apply to Blog", look at the Preview of your blog on the bottom of the screen. If it worked, great! If not, you can adjust the measurements. The great thing about the template designer is that you can change the measurements and immediately see what it did to change your blog. If you don't like what you did, just change it back. 

The 2 measurements you may need to change are the height and the margin. The height will depend on the original height of your image. As I said earlier, you may need to make this almost double your original height to allow for adequate space above and below your image.

The margin is a little more tricky:

a. The first measurement on the margin, "20px" is the space above the post footer (including the text in your footer, like "comments" and "labels"). 

b. The second measurement "0px" is the space to the left and right of the post footer. (Because I included the words, "center" after the direct link, you probably won't need to adjust this.) 

c. The last measurement, "-50px" is the space below the post footer. Notice that this number is negative. If this number was positive or even 0, it might create a much larger gap than you would like. A negative number closes this gap and moves the post footer closer to the text below it.

Adjust these numbers until your post divider is spaced well between the posts.

5.  Once you like what you see, click "Apply to Blog" and "View Blog". If you still need to make changes, you can always go back to this screen and adjust it again.

Let me know how this works for you. I'd love to see your custom post dividers!

Click here to read Part 4 of Customizing the Simple Template: Creating Your Own Post Icon.