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.

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

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

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

• leehansen.com
• clipartandcrafts.com
• bigoo.ws

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.

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

• 19 responses so far!
•      lyndon ( 9:40 PM on 10/30/09 )

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

•      Robert ( 5:49 AM on 10/31/09 )

  very good…thank you

•      Max ( 2:04 PM on 10/31/09 )

  Thanks Robert and Lyndon

•      BEBEN ( 9:17 AM on 11/1/09 )

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

•      Florence ( 2:08 AM on 11/8/09 )

  Oh! Great help Max! Thanks a lot

•      mrjack ( 4:22 AM on 11/15/09 )

  Thanks !!

•      electrinick ( 5:38 AM on 11/17/09 )

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

•      affordabe online college ( 9:27 AM on 11/17/09 )

  great help
  thanks for this!!!!!!!!!!!!1

•      Max ( 10:04 PM on 11/26/09 )

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

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

•      Arlen ( 10:01 PM on 12/7/09 )

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

•      endra ( 8:35 AM on 12/21/09 )

  nice, it’s work on my blog. thanks

•      Kaff ( 12:46 PM on 12/23/09 )

  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?

•      Max ( 7:47 PM on 12/25/09 )

  hi Kaff, please aplly the steps Adversely.

•      Grace ( 6:13 PM on 1/24/10 )

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

  Thank you, Grace

•      Marty ( 11:21 PM on 1/30/10 )

  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!

•      Max ( 9:58 AM on 2/12/10 )

  @ 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.

•      Robin ( 10:26 AM on 2/23/10 )

  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.

•      Jermaine McClinton ( 9:07 AM on 5/31/10 )

  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!

•      bilquer ( 11:14 AM on 6/5/10 )

  Froggy one seems OK.