How to Create a Post Divider

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

After last week’s scalloped edges tutorial, there were several requests for a tutorial on how to make your own blog post dividers, and I’m more than happy to oblige!! 
(Keep the requests coming! They help me to not run out of ideas!)
This DIY blog design aspect is so unbelievably easy– you’re going to be thrilled!
Practically no use of HTML required– it’s almost 100% just copying and pasting!
And here’s just a very brief overview of what a “post divider” is 
(there were a few questions about that too :): 
A post divider is exactly what it sounds like: an image that is inserted into the layout of your blog with the express purpose of visually dividing your posts. There are a few reasons for doing this:
  1. It looks pretty.
  2. It helps readers to more easily identify the end of a post and the beginning of another (especially helpful if you have a lot of text and few pictures).
  3. It looks pretty.
Here are a couple of screen shots of blogs with custom post dividers that I’ve designed using Picmonkey (or Picnik):

Ready to learn how?
Step 1: Design an image* sized to approximately 150px less than the width of your post section by 50px. For example: the width of the post section of my blog is 840px, so the dimensions of my divider image needs to be approximately 690x50px.

You can calculate the width of your post section by going to TEMPLATE –> CUSTOMIZE –> ADJUST WIDTHS, and subtract the width of your sidebars from the width of your entire blog
Step 2: Upload your image somewhere that allows you to copy an image location (photobucket, picasa, etc)– you need an image URL. I just upload mine onto a separate blog that I use solely for design “stuff.”
Step 3: Copy this code and paste it into your Custom CSS section. 
.post{
margin: 0 0 40px 0;
width: 90%;
background: url(YOUR IMAGE URL HERE);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:3.5em;
}
Step 4: Replace the part in red with your image URL. Click “Apply to Blog” to save.
That’s it! You’re done! Easy-peasy, right??

Tips/Notes:
  • See image design tips in this post, this post, and this post.
  • If you choose to upload your image into a blog post (like I do), be sure to size it to “original size” in the post. Otherwise, the image you’ll get will be much smaller than what you want.
  • Remember– this image can be anything you want! It can even be something like a headshot and a brief bio. It could be a collage of your favorite photos. It could even be just a solid, simple, black line– whatever you want!
FYI:
These are some of the DIY design topics I’m planning on posting about–
let me know if there are others not listed that you’d like me to cover and I’ll try to do it!
  • Gadget Titles (aka Sidebar Titles)
  • Custom Social Media Icons
  • How to Make and Install Grab Buttons
  • “Faux” Transparent Backgrounds for Design Elements

Please visit my Party Page for a more complete index of Link Parties.
If you host a regular link party, please add it to my Party Page!
« Previous Post

German Chocolate Cupcakes

Next Post »

Ritz Rolo Bark Recipe

39 thoughts on “How to Create a Post Divider”

  1. Yay! Thank you for another great tutorial! I’m learning so much from your tips and tricks.

    The scalloped divider on your site is cute 🙂

    For a future post idea, I would love to find out how you add a Pin It button that actually works when it is clicked in a blog reader like Google Reader. Yours from this post worked for me, but the one I currently use at the end of my posts doesn’t unless you actually view the post from the source.

    Reply
  2. You’re awesome. Thank you! I have the urge to pull an “Ashton pie crust dippers” all nighter so I can do this. 😉 Oh, and thanks to you I’ve created a new pinboard I called “blog tips” that I should just call “I {heart} Ashton”.

    Too much? I’m not a stalker, pinky swear.

    Reply
  3. This and the scallops tutorials are AWESOME and the ones that are coming are just great. I have always wondered how the divider was added to the blogs and how the scallop edges were created. Thanks to your tutorials I know now. Going to work on these right now and hopefully have them up pretty soon. One quick question when you say you add it to the post do you just add it as you do a regular image? If you select to add the code the the CSS section where exactly will that put that divider at? Thank you once again.

    Reply
    • I think I understand what you’re asking– and if I do, the answer is YES! You just upload the picture to your post like you would normally when writing a blog post.

      It just puts the divider immediately under the post– right under that little box that a lot of blogs have (the one that contains the sharebar, the comments link, the “posted by: Something Swanky”). My box is transparent, so you can’t actually see it. But look for it on other blogs– the divider will show up just at the bottom of that.

      Reply
  4. Well, it sure sounds easy enough but…I will probably mess it up! LOL! I will let you know how it goes:-) Thanks for the awesome tips for the computer challenged out here!!!

    Reply
  5. I would love to add a “Pin It” button. I followed the instructions on Pinterest, but I couldn’t get it to work. thanks for the tutorial. I’m gonna try it!

    Reply
  6. This was such a helpful, easy to follow post! Thank you also for introducing me to picmonkey!! I would love to see a post on how to remove the spaces between sidebar gadgets. Mine are spread way apart!. Thank again!! x

    Reply
  7. Hi, I just wanted to thank you so much for all your wonderful Blog design tutorials. I have been able to completely redo my blog using your tips. I truly appreciate it. Do you have any tutorials on how to put the author’s name and date under post title like you have? I can’t find a good tut on it and have looked far and wide! Thanks a bunch!

    Reply
  8. Hi I tried this, thanks for posting such an easy tutorial, I was wondering how to do it.

    However I followed the steps and it didn’t seem to work for me… Are the parentheses around the URL supposed to be there?

    Reply
  9. Thanks so much for this information! I am new to blogging (just started actually!) and am trying to customize it myself….this was JUST what I was looking for. You saved the day! 😀

    Reply
  10. Oh my goodness! I have been searching for this information for a site I am designing (the site that is listed) for the last week and your code is the only code that has worked. I simply must subscribe to your updates now. Thank you so much!

    Reply

Leave a Comment