How to Create a Post Divider posted by Something Swanky Pin Share Tweet Email 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: It looks pretty. 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). 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!
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
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
Haha, go to sleep! (Yes. It’s 12:15am and I’m blogging. So I really don’t have a leg to stand on here…) Blog BFFs aren’t stalkers 😉 Reply
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
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
I was totally wondering how to do this! Thanks for the tutorial! I can’t wait to give it a try 🙂 Reply
Hi, I’m Connie at http://hotflashncraftn.blogspot.com/, your new GF friend, I would love it if you could stop by and be mine, too.Yes, thank you for tips. I still don’t know what I’m doing on my blog, but I appreciate all the help I can get. Reply
Whoo Hoo! Very easy! I added it to my blog. It took me a few tries to get my picture to look how i wanted but I resized it to 50×620 on picmonkey and it was a good size. Reply
I’ve wanted to do this for a while on my blog. Thanks for the tutorial! Erintakingtimetocreate.blogspot.com Reply
Love this! Your tutorials are amazing and I would love it if you linked up to Creative Thursday at http://www.michellesatasycreations.blogspot.com. Have a great week. Reply
I pinned this so I can go back later and figure it out on my own blog! Thanks for the tips! Melissapolka-dot-productions.com Reply
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
I followed exactly the steps but the divider image does not show up!Any help would be appreciated… Reply
I followed your directions and was able to get the post divider, but I am not able to have it display just like yours, right above the comments. I seen to have a big gap and cannot seem to figure out how to fix it. If you would not mind taking a look at it and maybe providing some quick tips I would really appreciate it. Thanks http://www.motivatedmommyoftwo.com Reply
I am just seeing these tutorials.. and I saw your post above about your spacing issue. I too am having that problem. I just checked out your blog and it looks great! How did you fix that issue? Kelly http://www.PrimerandPaintedNails.com (PS – still seriously working on my design) Reply
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
Thanks for this tip! Hopefully I can get around to putting some dividers up onto my new site http://www.frankly-books.com 🙂 Reply
Thank you! This is the only tutorial that I’ve been able to get to work. The simplicity and effectiveness is much appreciated. Reply
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
Thank you so much for ALL your tutorials! I love them so much, you have helped make my blog so custom! Thanks! Reply
Thanks so much for these great blog tips. I am trying to make my blog design my own and unique. Reply
Hello! Question for you. How do you remove a page divider you’ve made? I redesigned my blog, and I can’t seem to get my first divider off. Thanks! Reply
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
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
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
