How to Create a Post Divider

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!

Ashton Swank

Ashton is the owner and author of Something Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador. Her focus is in food styling, food photography and recipe development.