April 4, 2012

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.

46 comments:

  1. I just wanted to say thank you for your free designs. I had my friend add the sew cute design to my blog and i just love it. I have posted a link to your blog on my page so everyone knows where to go:)

    ReplyDelete
  2. You're amazing!
    I love you and your work!
    I love your tutorials!
    THANK YOU!
    THANK YOU SO MUCH FOR ALL THE SUPPORT!

    ReplyDelete
  3. GOD LOVE YOUR SOUL!!! I have looked for DAYS to find out how to add post dividers! Thank God I found it! Thank you sooooooo much!! Will add your button and rave on my Blog about you!!

    ReplyDelete
  4. I'm so glad you are posting instructions for the new blogger templates. I had my blog all set up with the old ones and could not figure out how to edit these new ones. Thank you.
    Do you know how to add a signature to the blog posts as well?

    ReplyDelete
  5. I have a long list of future tutorials but I will add signatures to the list. Stay posted!

    ReplyDelete
  6. Thank you so much for making it so easy to add dividers! My blog looks so cute!!

    ReplyDelete
  7. Hello, it is great tutorial, so easy :)
    I have applied some cute post divider on my blog
    Thank you very much :)

    ReplyDelete
  8. This made it so easy! Thank you so much!

    ReplyDelete
  9. Replies
    1. So sorry! Are you using the simple template?

      Delete
  10. I did this, but then at the bottom, my links to older pages and home do not work, is there a reason why? supportindieauthors.blogspot.com

    ReplyDelete
    Replies
    1. Is it still not working? I tried it and it worked for me. The Home button won't work if you are on the Home page.

      Delete
  11. This works the first time I add it to the CSS, but then after I apply, it says something about cross scripting and the live on blog image is gone. Do you know what could be causing this?

    ReplyDelete
    Replies
    1. I don't know. Do you have the Simple template? Make sure you don't have any extra code in the Add CSS box.

      Delete
  12. Thank you very much for your tutorial. It worked great. I even created my own little post divider on Pixlr. t'was a little work, but I like it. And I am so proud of myself!!!
    Thank you so much.
    All my love from Belgium
    AstaK

    ReplyDelete
  13. Hi Dani!!!
    I've been searching for days about this divider thingy and it ripped my head off! All the tuto's in others blogs are not working for me coz I can't find the code, its not on my HTML. But I keep my fingers googling and poof! Found you! OMG it's so easy! CSS! I love you Dani!!
    Come, check my pandas ;)

    Hugs and kiss from Malaysia ♥

    ReplyDelete
    Replies
    1. But it took away all my pages tab font back to normal. And reset all the FB share counts also my rating on every rated posts. Oh well, I guess I hv to edit the font back. Thanks again Danie ^_^

      Delete
  14. Hi Dani,
    I along with the others am very appreciative of your simple instructions.
    There was already a piece of code in the css box (from something else I added at some time, I presume) so I added this under it. It looked very cute. But...it disabled the 'older posts' link. I wonder if I could be lucky enough for you to have time to give me an idea what I did wrong and how to correct it?

    ReplyDelete
    Replies
    1. I have never seen that happen before but I will try to look into it.

      Delete
  15. I had a problem. it worked but then my "older and home" button didnt work on my home page. When I deleted the code it worked. Any suggestions?

    ReplyDelete
    Replies
    1. The reader above had the same problem. I have never seen it, but I will try to look into it.

      Delete
    2. I had the same problem where it covered my "older posts" and "home" button...but changing the -50px to 0px solved the problem for me. Hope that helps anyone in the

      Delete
  16. Hi Dani, With the new blogger, it's hard to find current tutorials, so thank you! I customized my blog http://bluejeanscoffeeandfriends.blogspot.com/ and then decided I wanted to add a divider. There is some coding already in my CSS. I followed your instructions (trying it on a test blog first, and it worked). I then added this code to the bottom of the CSS page (after the other codes), but nothing comes up. The size of my divier is 410 (w). Are you able to help me on this?

    Thanks again for sharing.

    ReplyDelete
    Replies
    1. Can you email me a copy of your template? Without seeing the code in your whole blog it is hard for me to know. You can just copy the html and paste it in an email. My email is blogdesignsbydani[at]gmail[dot]com. Your blog looks great, by the way!

      Delete
  17. Hi Dani,

    I sent you my the html to my blog template. Thank you so very much for your help!

    ReplyDelete
    Replies
    1. hi dani, i'm quite upset i've been working with my blog and wanting to put a post divider in it , since the new blogger make it harder i rarely find useful tutorial but then i found you and when i looked at yours it seems easy , but when i tried it it doesn't worked :( when i try to apply after putting the code and the direct link there was nothing. the post divider did not showed up, help me please?

      Delete
  18. I don't want no graphics just a plain black line

    ReplyDelete
    Replies
    1. What software are you using? If you can create a black rectangle the exact size you want for your post divider then you can follow the instructions above to upload it to your blog.

      Delete
  19. thankyouuuuuuu so much
    I Love you and this blog :D
    it's so easyyy,
    but there's something that make me unsatisfied enough..
    because the divider blocks the footer
    i've tried to change the measurements but it cant be in the right position. is there any other measurement i can use?

    ReplyDelete
  20. Danyy, finally I can fix it, the footer is satisfying me now.
    thankyouu so muchh

    ReplyDelete
  21. Mine wont work. I've tried every tutorial on the web :(

    ReplyDelete
    Replies
    1. Can you give more details as to what you have tried? Did you use the simple template, what code did you enter, etc.

      Delete
  22. I was so excited to find out how to do this and did exactly everything. Mine didn't work though :/ is there anything that might be causing it to not work? Thanks so much!!

    ReplyDelete
  23. hi Dani..
    my problem is when place the into add css section, no preview change for me..

    ReplyDelete
  24. it's so sad to hear that you've stopped blogging. but a lot of thanks for the instructions. this is the only one that worked for me. ;-)

    ReplyDelete
  25. You are amazing! You have helped me customize my blog so much. Thank you <3

    ReplyDelete
  26. I just need a blank divider.........

    Is it possible?

    ReplyDelete
  27. Thankyou so much Dani ! Couldn't see mine at all but then I changed the bit after where it says margin to 10px and not 20px and it appeared yeaaaah ! :) Viv xx

    ReplyDelete
  28. I will try to use this on my blog

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.