How to add a blog post divider on Blogger

blog-post-divider

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.

[postwarning]

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.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

39 comments

  1. Aman on

    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?

    Reply
    • Ellie M on

      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.

      Reply
    • Ellie M on

      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;}.

      Reply
  2. Lucy Cole on

    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!

    Reply
  3. Jenna on

    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!

    Reply
    • Elaine Malone on

      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>

      Reply
      • Jenna on

        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!

        Reply
  4. Amy on

    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!

    Reply
    • Elaine M on

      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.

      Reply
  5. Tracey Greenstein on

    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

    Reply
    • Elaine Malone on

      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!

      Reply
  6. Abusah on

    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.

    Reply
      • Olaedo Njubigbo on

        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!

        Reply