Monday, March 25, 2013

How To: Add Post Dividers


Another way to add a bit of flair to your blog is to have a post divider image. This is a thin, horizontal graphic that separates your posts instead of just a line. It adds another level of personality to your blog, and can make your space seem more put together.

You can see what my divider graphic on Fox + Hazel looks like below:


First, you need to find or create a divider image that you like. Choose something that is noticable, but not so flashy that it distracts the readers eye.

Here are a few free resources you can use:

IROCKSOWHAT - 1 & 2 & 3

Make sure your image is the same pixels wide as your posting section of your blog. To find out how wide your post section is, go into the Template section and click on Edit Html. Search for "main-wrapper" (without the quotation marks.) This is how wide your images should be inside your post to fit. Make sure your divider is the same width. If it's too wide, it will hang over into your side bars. It's best to have an exact fit, but you can air on the side of too small to be safe. You can use Picmonkey to re-size your image if needed. You can also do this within Photobucket.

Take that image and upload it your photo hosting site of choice. I'm a Photobucket user, so mine is uploaded there.

Next, go into the layout section of your blog and click Add a Widget. Next find the Html/Javascript widget and click on it.



Copy & paste this code into that box:

<style type="text/css">.post {
background: url(YOURURLHERE) no-repeat;
background-position: bottom center;
margin:1.5em 0 1.5em;
border-bottom: none;
padding-bottom: 3.5em;}
</style>

Where it says YOURURL, paste the direct URL for your image from your hosting site. If you are using Photobucket for example, then find the direct link for your image from there and replace it.

Click Save. Your widget doesn't need to be anywhere specific in your side bar as it won't show up there because the HMTL is affecting the blog posts and nothing in your sidebar. I personally keep all my HMTL widgets on the bottom left hand side just to keep it organized.

Now view your blog and see your magical work! Amazing right? Now your blog is just a teeny bit more custom and a whole lot snazzier looking! Simple things like a post divider can help set your blog apart from all the others floating around in the blogosphere - and of course you want to be set apart, right? ;)

If you have any questions, please ask away! We'll try our best to answer them =)





Pin It

37 comments:

  1. thanks for featuring my shtuff!

    ReplyDelete
  2. Thank you so very much for the info. It worked and I love it.

    ReplyDelete
  3. I tried and tried and tried until I found your code, which made it so simple! Thank you!

    ReplyDelete
  4. Thank you this worked a treat x

    ReplyDelete
  5. Is it possible to add just a space instead of image urls?

    ReplyDelete
  6. Thank you for this magical widget! <3

    ReplyDelete
  7. i want a blank/transparent dividers between blog posts? is it possible....

    ReplyDelete
  8. Thanks, it worked perfectly! :)

    ReplyDelete
  9. Thank you so much for this!! And thanks for making it so easy!

    ReplyDelete
  10. Thank you very much for this tutorial:) Very helpful!!!

    Love,
    Charlotte

    http://foreignlylove.blogspot.com/

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Hi! Love your blog, by the way. I'm having some problems with this tutorial though... The image is behind the gray box at the end of the post. Any ideas why this is happening? Thank you :)

    ReplyDelete
    Replies
    1. Hi!
      Try changing this line:

      padding-bottom: 3.5em;}

      to this


      padding-bottom: 10.0em;}

      Hope I helped!

      Sam @ TFiOW

      Delete
    2. It worked!! :) thank you so much!!

      Delete
  13. This was the third tutorial I tried! Thank you so much. I'm following on Google now. I do have a question . . . My post divider is overlapping with my labels. Any idea how I can correct this? Any help would be appreciated. Thanks again!

    ReplyDelete
  14. Thank you so much for this!! And thanks for making it so easy visit my site http://www.cheap-pvas.com/

    ReplyDelete
  15. Thank you so very much for the info. It worked we are service provider Craigslist Posts | Craigslist Posting Service | Post on Craigslist for more info.visit our site http://www.craigslistposts.net/

    ReplyDelete
  16. Thanks so much! After many fails, I finally did it! yay!

    ReplyDelete
  17. Super easy - thank you for posting and sharing this tutorial! :)

    ReplyDelete
  18. How about a column divider. I've searched everywhere and can't find a how to.

    ReplyDelete
  19. Fantastic article. Thanks a bunch. xxx

    ReplyDelete
  20. Thank you so much for this! payudara montok ! And thanks for making it so easy!

    ReplyDelete
  21. I tried but it did not work i could not see the line on my blog www.nurses-round.blogspot.com

    ReplyDelete
  22. Hi Torrie, thanks for your help. This is very easy!

    ReplyDelete
  23. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me.
    clipping path service

    ReplyDelete
  24. Aw, this was a very nice post. In concept I wish to put in writing like this moreover ?taking time and actual effort to make a very good article?but what can I say?I procrastinate a lot and not at all appear to get one thing done.
    clipping path

    ReplyDelete
  25. Thanks for the quick easiness of this, I appreciate it!

    ReplyDelete
  26. Thank you, it's very easy and simple :-)

    ReplyDelete
  27. Is there any way to add more space between the divider and the date heading on the next post?

    ReplyDelete
  28. Thank you so much. Just what i was looking for. It works perfect.

    ReplyDelete