Pin It

How To Make Post Dividers

This is a simple tutorial on how to add dividers between posts, something that will nicely separate them. Heres how you do it:
1) First of all make your picture- that will be your post divider, or find some on the web that are free to use. Make sure the width of your divider isn’t wider than your main column- to find the width go to your main wrapper and the width will be listed there. Here’s an example:

Once you have your divider made and sized appropriately, you need to upload your divider onto a web hosting service (like Photobucket).

2) First backup your template, now go to your HTML section and find the following part of code: (to search for it hit ctrl+F)

Now REPLACE the code from above with the following

Your code may look different- thats alright, whats important is to find the .post paragraph. Now replace the background URL with your own divider url (provided by photobucket after upload). If you cannot find the URL- it ends in .png to give you an idea. you can increase or decrease the value of “padding-bottom” to add some space between divider and bottom of the post.

If you have problems with adding in your divider- there is one other option. Only use this option if the one above doesn’t work for you.

1) go to your HTML section and ‘expand widget templates’, now hit ctrl+F to search for this line:


now right AFTER that line, insert this code:

20 refers the the height of the divider, so increase/decrease the number to get the desired look.

Don’t know how to make your own divider? I have a collection of post dividers for FREE! Click image to download:







Comments

  1. Crystal & Co says:

    I just found you guys on SITS! Love your site… you have something for every day of the week! I am a mom to five boys ranging in age from 11 yrs – 1 yr!

    I am going to add you to my blogroll!

    Can not believe I did not find you sooner!

    Check me out!

  2. Evelyn / 2 Pequenos Traviesos says:

    Gee thanks, Lena. I finally did it! This is something I've been wanting to do. Your tips are fabulous!
    Hugs from PR

  3. thanks for tutorial. i'll try this one…

  4. May I know what does it mean by "Make your Picture"? I have tried to hit ctrl+7 but it doesn't work. I will try again, but please tell me how to do it. Thanks

  5. Hi Deb!
    make your picture means you create it using photoshop- based on your comment I am guessing that you aren't familar with this. My suggestion would be to use a premade post divider.
    And the command is Ctrl + F not ctrl+7- which could be why it isn't working.

    I hope this helps :)

  6. ham1299 says:

    Awesome! Thank you. This was quick and easy – and works perfectly! I really appreciate your tutorials and help with customizing blogs!

  7. Following you over from Trendy Treehouse’s Marketing Monday. I am loving and following your blog :) Great post. I need all the help I can get :)

  8. Michelle Pixie says:

    Stopping by from SITS to say hello! Very neat info!! :-)

  9. Ms. Katrina says:

    I'll have to dust off my fledgling blogger hat and give this a try. Very nice.

    Following from MBC.

  10. Bitter Sweet says:

    TQ, awesome tutorial! im using ur divider ^o^

  11. MessyMissy says:

    Thanks for the tutorial!!!! Now following from MBC, hope you will do the same!!!! http://marvelouslymessy.blogspot.com

  12. Danielle says:

    First of all I LOVE your blogs! I always use your templates and think they're the cutest. I really wanted to try this out but when I put it in and saved it all that showed up at the end of each post is this little box with a red X in it. How can I fix that or get rid of it? Thanks!

  13. Hi Danielle,
    i went to your blog and I couldn't find your email. Could you email me at simplyfabblog{at}gmail{dot}com
    and we could discus how to fix the problem :)

  14. Brooke Nicole says:

    Thank you for these instructions and for the graphic! =) I love your blog!

  15. Thank u so much! lucky i crossed by here. im trying on it currently n see how it wil works..

  16. Anonymous says:

    How to make the divider more longer? Is it i need to edit in photoshop 1st? Thanks :)

  17. Lori Vaughn says:

    Love, Love, Love them have them on my site now, again something I have been looking for, you are just a wealth of knowledge.

  18. Hi Lena

    This is Deb. I don't intend to use photoshop as it has to be bought. Is there another option that can be used? Thanks

  19. Hi Deb,
    You can use GIMP- it free to use and works very much like photoshop. Go to gimp.org to download

  20. hi i love your site. there are so much to learn and your templates are all beautiful. =)

    by the way do you have templates for wordpress? tc

  21. 2 Pequeños Traviesos says:

    Hi Lena! I was visiting your other blog and it just poped me right back to Mommy Moment. I changed again my blog template and installed one of your post dividers successfully. But I was wondering if there is a possibility you provide a tutorial on how to make page dividers, or tell me a safe place to find others. I'm looking for something related to Nature (a twig, branch, rocks) and I'm afraid to search it over the internet. My computer just recovered from a severe virus :( THANKS A LOT
    2pequenostraviesos@gmail.com

  22. heygirl says:

    HELLO…

    I'M DONE USING THIS DIVIDER

    BUT THE PROB IS MY DIVIDER LOOK VERY SMALL.

    HOW TO INCREASE IT,TQ

  23. heygirl says:

    OOPPPSSS…..i done…i increase the height

  24. I added this tutorial to my Monday Morning Favorites. Hope you don't mind.

    Blessings!
    LaVonne

    Long Wait For Isabella

  25. NikhilVarma says:

    Hi Lena. These images were so nice that i have linked to this post from my post '350 Images for Post Separation'.

  26. Hi I have been bouncing between you and Kevin and Amanda reworking my blog. I am working on my test blog till it is all done then will switch it over. Problem is this- I did the signature blog on the div class post footer but mine is a -1 not -3.
    then I have no where to put an end of post divider..any help?
    Here is the blog address:
    http://tandtwork.blogspot.com/
    email: hebertfamily06@yahoo.com
    thanks tammy

  27. Hi Tammy,
    You'll need to make your signature according to my tutorial on mommy moment on how to make your own signature: http://www.mommymoment.ca/2010/03/how-to-make-your-own-signature.html
    once you do that tutorial you can do the post divider tutoiral and there should be room

  28. Thanks ever so much! I did it – added your button to my blog too… http://www.theroadnamedme.com

  29. really love your blog!!… thanks a lot for tutorials..^_^
    my blog used template for your blog..^_^

  30. nice tutorial :)
    I’ll try this on my blog…thank you so much..

  31. Thanks so much! I love your dividers!

Add Your Comment

*