Thursday, 12 September 2013

HOW TO: Add a Post Divider on Blogger

Hi everyone! This is my first 'How To' post which is a bit daunting, but I've wanted to do it for a while. Today I'll show you how you can add a post divider to add a bit of a twist to your blog design!

What is a post divider?
Can you see the black lines in between the top post and the post below? That is my post divider and as the name suggests, it divides your posts. It is a thin image that is the same width as your blog posts and you can customise them however you want to really easily.

Okay so how do I make one?
Firstly you need to know how many pixels your post divider should be. Go to Template and click Edit HTML, hit CTRL and F on your keyboard and a search box should pop up. Type 'main-wrapper' without the quotes and find the highlighted section. There you will find the width of your blog post space.

If that doesn't work for you, go to Template, click Customise and then click Adjust Widths. There you will find the width of your whole blog and your sidebars. To find the width of the blog post area, subtract the width of your sidebar from your whole blog width and you will have the answer! 

Still with me? I hope so! Next, you need to create your divider. There are some great free online photo editors where you can make beautiful graphics; some examples are PicMonkey and Pixlr. Mess around with the patterns and textures, and see what works for you!

After that, resize the image using the same website by putting in the measurements you collected at the beginning.

You're almost done, I promise! You need to find somewhere to host your image. Personally, I normally use Photobucket. Upload it!

Then, go back to Blogger and click Layout, and then Add a Gadget. Select Add HTML/JavaScript. Back on Photobucket, look for the Direct Link for your photo. Copy and paste it into the Add HTML/JavaScript box back on your blog.

Click save. You're done! See how easy that was? If designing your own post divider doesn't seem like something you want to do, I found this little pack of post dividers which you can use for free, and then do the steps which I included above.

Your blog looks pretty damn cool now (not that it didn't before!). If you followed this tutorial to add your own post divider, I'd love to see what you created so feel free to link me up in the comments below! And if this tutorial didn't work for you then you can ask me questions in the comments or on Twitter (@MileLongBookS) and I'll try my best to help you. :)

Would you like me to do more 'How to' posts?


  1. This is really cool, Amber! But I have a problem finding my blog measurements. Could you help please?

    1. You're on Wordpress, this is a Blogger tutorial. Having no experience with Wordpress I can't help you with that one, sorry! Hopefully someone else who comments will notice your problem and help you instead.

    2. Imagine I were on blogger, how would you help me? Because I'm planning on moving back anyway!

    3. Come on Twitter (@MileLongBookS) and I'll try and help you in real-time :)

  2. I don't use Blogger but you did a great job for your first How To! Very cool!

  3. Hi! Thanks for the wonderful tutorial. But I'm having a problem. The gray box that used to be at the end of the post (basic template) doesn't disappear and is in front of my post divider. Any ideas on how to make it go away? Thank you so much!

    1. Hi Helena! The post divider doesn't replace the box at the end of your post, it just sits below it. I don't know how to make it go away, sorry! Good luck. :-)

    2. No problem! Thank you for your help :)

  4. thank you so much for sharing Apply divider on Blogger Great.


Feel free to leave me a comment. I will get back to you as soon as I can! :)