How to add a blog post divider on Blogger

A post divider is simply a line or image, which divides your blog posts. It helps the reader distinguish one post from another when scrolling down through your blog. You can a a minimal line or something that matches your theme. I’ve added some free dividers to the shop if you don’t want to make your own.

Add a post divider – with image

Create an image that you want to use as a divider. I suggest using GIMP to do this, it’s a free alternative to Photoshop. Once you’ve designed the divider, save it and upload it to Dropbox, Photobucket, Flickr, etc. Go to Template > Edit HTML and search for .post {. Add the following code underneath .post { and before }.

background:url('DIRECT IMG URL');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px;

If .post { is not in your template, use this code instead. Go to Template > Customise > Advanced > Add CSS and paste the following code.

.post { background:url('DIRECT IMG URL');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px; }

This will add it above ]]> </b:skin> in Template > Edit HTML. Change DIRECT IMG URL to the Direct Image Url of your image from Dropbox, Photobucket, Flickr or whatever hosting site you uploaded it to. Alter the margin and padding values show in pink to position the divider if it’s on top of another element such as your post footer details, post title etc.

Add a post divider – no image

Go to Template > Edit HTML and search for .post {. Add the following code underneath .post {

border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin:  10px 0px  10px 0px;

If you cannot find .post { in your template then use this method. Go to Template > Customise > Advanced > Add CSS and paste the following code. This will add it above ]]> </b:skin> in Template > Edit HTML, if you want to alter or delete it later.

.post { border-bottom: 1px solid #eeeeee; padding-bottom: 10px; margin:  10px 0px  10px 0px;}

You can edit the thickness of the line by altering 1px, the colour by changing #eeeeee. Solid is a solid line, you can also used dotted, dashed, groove, double, ridge, inset and outset. Alter the margin and padding values to position the divider.

Related Posts

How to find code in Blogger HTML Editor.
How to fix no reply blogger comments.
How to move and remove the header gadget on your blog.
Backup your entire blog on wordpress or blogger.

43 Comments

  1. Followed the instructions but the divider is going between the title and date of the post instead of between posts?

    Thanks.

        1. Hello, make sure to alter the margin and padding values to move the post divider as shown above. Your blog is set to private so I can’t check it to give you direct instructions πŸ™‚

  2. Hi Ellie,
    I was trying to fix my post divider, especially the additional white space it added between 2 post and I came across this post. I tried changing the margins, like you said, but it does do anything. I even went for -50, but again, no change. Can you help?

    1. Hello, you have a margin bottom value of 30px on .post and excess margin, padding and height values on .post-footer in Template > Edit HTML. This is what’s causing the space. You also have two margins set for it which is why one is over-riding the -50px that you added.

    1. Hello Noemi, this is something I’m going to do a tutorial on soon as I see this question a lot! I will let you know when it’s published πŸ™‚

      1. Hi Ellie,
        I would also like to know how to divide each post in separate box and adding css to it.
        Thanks! πŸ™‚

    1. Hello Adrienne, fab blog! Find the following code in Template > Edit HTML – .post { background: url(http://i50.tinypic.com/16antdk.jpg); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; border-bottom:0px dotted #302E2E;padding-bottom:3.5em;} and replace it with .post {border-bottom: 1px solid #000000; margin:.5em 0 1.5em; padding-bottom:3.5em;}.

  3. Hi Ellie, as always loving your tutorials! Today I tried to do this with an image divider, it hasn’t quite worked and has gone underneath the ‘posted by..’ and ‘comments’ section which you can see on my blog. Is there anything I can do to fix this? Thank you!

    1. Hello, alter the margin and padding values to re-adjust it. Find .post and change padding-bottom: 10px; to padding-bottom: 60px; and that will move it down.

    1. Hello. You’re missing a closing bracket in your template, go to ]]> </b:skin> and above it you’ll see two codes for .post and the first one is missing a closing bracket }. Also make sure you’re using the direct image link and not the Dropbox share link.

  4. Hello, this tutorial is perfect but could you maybe help me on how to align the divider with my post just like yours? Thank you very much! x

    1. Hello. I’m not sure what you mean? Your post divider is the same width as your blog post, it just appears differently as your blog content is centred.

  5. Hey there! I followed both of your methods but it isn’t showing up on my blog. πŸ™ Could I have some other code inputted somewhere that is blocking it from showing? Thanks in advance for your help!

    1. Hello Jenna, I see you got it working πŸ™‚ just to let you know you have duplicate custom CSS in your Template. If you go to Template > Edit HTML, you’ll see the repeats above ]]> </b:skin>

      1. Thank you so much Elaine! My CSS kept disappearing from β€œCustom CSS” in the advanced settings on blogger so I would put them back. Now I see every time I did that, it just duplicated it!!

        Thank you for your help! It’s awesome what you are doing to help others for free!!!

        You rock!

        1. Awh thank you Jenna, really appreciate that! Yeah it automatically goes from there into your CSS so every so often clears out the box, can be confusing πŸ™‚

  6. Thanks for the tutorial! I’ve been looking for such a tutorial for forever!
    How can I insert the divider image after my social media sharing icons and my LinkWithin widget? Right now the divider image is between my commenting forum-area-thing and my social media icons and LinkWithin.
    Thank you in advance!

    1. Hello. You could add .linkwithin_div {border-top: 5px double pink; margin: 10px 0px;} to your CSS to create a similar look without an image. If you want to use your image add .linkwithin_div:before {content: url('IMAGE URL'); background-repeat: no-repeat;} to your CSS.

  7. Hi! Your site is so helpful. I used the code you provided for adding a dividing line, which worked:

    article { border-bottom: 1.5px dashed #FF0000; }

    But my question is, how can I shorten the distance of the line? I would prefer to use a solid line that doesn’t stretch all the way from the left to the right side.

    Thanks!
    Tracey

    1. Hi Tracey. Thank you so much, so glad you think so! So, because it’s a border and the width value determines the thickness of the line, there’s no way to adjust the length. What you could do is a) use pseudo-element to target after the div to add a border and adjust width or b) add a new div in the HTML and add border to that with a shorter width. Hope this helps!

  8. Thank you very much. I used the code for the non-image post divider. My problem is that it only divides popular posts (these show directly under an expanded individual post). They do not show/divide posts on my homepage/feed (which usually show under “recent posts”). I would love if you can help me get dividers on my homepage. Please, I use the Notable theme in blogger. Thank you.

    1. Hi Abusah. This tutorial is for the default Blogger templates and not the new Blogger themes. You can use .blog-posts article for the new themes instead of .post.

      1. Thank you, so much. I just upgraded my theme to the Notable theme and while searching for how to add a post divider, I stumbled upon your article and this comment. I have just added the divider. Thank you!

  9. Hello! i’m glad i found your blog! Everything made easy for a non-IT like me lolol
    i just wonder, is there any way to hide the divider on my post entry? I mean i want it to be only showing at my homepage.

    Thanks a bunch!

  10. I’m wanting to place the separator line AFTER the comments/share (or alternatively BEFORE the post date) on this website: https://southwestbaptistchurch.blogspot.com/

    Been a while since I worked on websites and my brain is a bit foggy lol.

    Thank you in advance!

    You are doing a great service for folks by providing so much wonderful info. Bless you. β™₯

Sorry, comments are closed!