Home About Meet Contact

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

46 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
  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. Thank you so much your such a big help!

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

    ReplyDelete
  20. Fantastic article. Thanks a bunch. xxx

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

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

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

    ReplyDelete
  24. 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
  25. 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
  26. Thanks for the quick easiness of this, I appreciate it!

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

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

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

    ReplyDelete
  30. Although this is a basic tutorial, it is very informative and valuable.

    clipping path service in Usa | ghost mannequin service

    ReplyDelete
  31. Thank you for your sharing, easy and simple way to provide the article.

    Craigslist ad poster

    ReplyDelete
  32. Thank you guy for this useful and effective post here . I appreciate your wonderful post . Clipping Path Service | Remove White Background | Product Photo Editing

    ReplyDelete
  33. It takes gigantic learning to deliver this bit of craftsmanship.
    brother cartridge

    ReplyDelete
  34. It's good that someone is writing about it.

    Missy

    ReplyDelete
  35. نجار بالمدينة المنورة
    لا يوجد شخص لا يكون بحاجة للتعامل مع نجار بالمدينة المنورة لكي يساعده في التعامل الصحيح مع أثاث المنزل الخشبي، وبالأخص إذا كان يرغب في تغيير محل السكن فقد يكون وقتها الوقت المناسب للاستعانة به، حيث أنه قادر على القيام بفك وإعادة تركيب قطع الأثاث الخشبي مرة أخرى، كما أنه يعمل على ترقيمه لكي يكون من السهل ترتيبه وإعادة تركيب مرة أخرى.

    سباك بجدة

    يقوم سباك بجدة بالقيام بكافة أعمال السباكة للمنشآت السكنية الجديدة، فنحن نعلم جيدا أن من أساسيات المنازل الجديدة هي تركيب مواسير المياه وأيضاً مواسير الصرف الصحي وصنابير المياه والمراحيض والأحواض وحوض الاستحمام والبيارات وغيرها.

    ReplyDelete