Home » Blogger Tutorials, Tricks and Hacks » blogger graphics » Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

51,566 views

One of the most important factors to give your visitors a good impression about your blog, is to make it easy to read,
And since i see many blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts, so today we’ll lean how to add a Separator between blogspot posts easily. And here is a demo.

Step 1

Log into your blogger account, navigate to , Dashboard >> Layout >> Edit html, and find the following code

.post

this is the cs part that controls your post layout and style, it must contains few css properties like the following.

.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }

Here is the separator css properties :

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,

2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.

Now your final code should looks Like The following one.

.post{

margin: 0 0 40px 0; width: 90%; background: url(http://www.imagehost.com/separator.jpg); background-repeat: no-repeat; background-position: bottom center; margin:.5em 0 1.5em; padding-bottom:2.5em; }
Free Separator Images

Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif

http://3.bp.blogspot.com/_JwD5r652h00/SuttjcXA_4I/AAAAAAAAANo/w2BZApq6Jn4/s1600/bar54.gif

http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif

http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutu7DaxOSI/AAAAAAAAAOI/Q3okL8VTVQ4/s1600/clipart-heart-border.jpg

http://3.bp.blogspot.com/_JwD5r652h00/Sutu65IKnaI/AAAAAAAAAOA/UJuKQP29vtg/s1600/chain.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutwt4UlPXI/AAAAAAAAAPw/tZ9RY7m1tKA/s1600/stonebar.gif

http://1.bp.blogspot.com/_JwD5r652h00/SutwFSJ2_LI/AAAAAAAAAPo/WMkQ9bAcVn0/s1600/resfiles_sdfp.gif

http://1.bp.blogspot.com/_JwD5r652h00/SutwFArTx_I/AAAAAAAAAPg/RlKs6tTx_Mw/s1600/resfileszcp.gif

http://2.bp.blogspot.com/_JwD5r652h00/SutwEnMKk3I/AAAAAAAAAPY/pz3dI5GhTGY/s1600/resfiles_output.php.gif

http://2.bp.blogspot.com/_JwD5r652h00/SutwEayD8dI/AAAAAAAAAPQ/9k10wIhaHjU/s1600/pumpkin-border-hth.gif

http://3.bp.blogspot.com/_JwD5r652h00/SutwEO1pNLI/AAAAAAAAAPI/FAmwFnDEASw/s1600/irish-border4.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutv3RFLl9I/AAAAAAAAAPA/e7VXY-5er8A/s1600/ivy.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutv3EVHqdI/AAAAAAAAAO4/jKfcf3u4IJ4/s1600/irish-border1.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutv3MzdTQI/AAAAAAAAAOw/LRKkTCzKkGA/s1600/frog54.gif

http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutv2gVPVII/AAAAAAAAAOg/w1Wh7KancXM/s1600/drawing-separator.gif
Need More Separator Images

Ok, here are 3 links to great sites contains hundreds of free separators and page dividers.

Need Even More And More Separator Images

Search google for the following keywords

  • Page dividers
  • Page dividers clip art
  • page dividers graphics
  • page dividers animated

If you liked this post please share and follow us.

Liked It ? Please Share

Comments

19 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. lyndon says:

    It’s so cool max. Thanks a lot for this.

  2. Robert says:

    very good…thank you

  3. BEBEN says:

    i have a pic in my side post, confuse…ixixixi but i see what it mean…..great MAX

  4. Florence says:

    Oh! Great help Max! Thanks a lot :)

  5. mrjack says:

    Thanks !!

  6. electrinick says:

    thanks.it worked.I wanna ask that can I add adsense codes between post

  7. great help
    thanks for this!!!!!!!!!!!!1

  8. Max says:

    @ Florence, mrjack and affordabe online college
    thanks friends for you comments.

    @ electrinick yes you can, i’ll try to make a tutorial soon.

  9. Arlen says:

    it doesn’t work for me..how could it be?

  10. endra says:

    nice, it’s work on my blog. thanks

  11. Kaff says:

    I have a question. I have decided I do not want this hack for my blog as it doesn’t really benefit it in any way. I would like to remove it. How would I go about doing that?

  12. Max says:

    hi Kaff, please aplly the steps Adversely.

  13. Grace says:

    I’m Bookmarking you. And if anybody asks, I’ll tell them you’re the genius behind it all.

    Thank you, Grace

  14. Marty says:

    Thanks! This worked great!
    I didn’t use any of your images, just made a black line in photoshop and hosted it at photobucket, and used the direct link from there.
    Worked perfectly. Blog not public or I’d post the link here.
    Thanks!

  15. Max says:

    @ GraceThanks grace for your very nice words. i’m really happy to read your comment.

    @ Martythanks and it’s a good thing to use any photo editing software to create your own style. and btw, you can post your url here.

  16. Robin says:

    HI Friend. I just added a post divider. But there is some problem with it. Look my blog. It appears two times. What to do? I need only on divider. Help me please.

  17. I’m unable to do the whole major blogger template thing just yet so by doing little things like this, improves the basic blogger templates by leaps & bounds. Thank Max!

  18. bilquer says:

    Froggy one seems OK.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here