Add devider between posts for blogger-post devider

Few days back i write a post about adding background color/image to your blogger post.Now we will learn to add post devider between posts.I have seen certain blogs with good content but failed to hold readers because of improper template design with lack of popup ability .ONE of the main reason for adding post dividers is to make readers easily differentiate between posts.
Lets just begin and see how we can add post devider to any customized blogger template.

• Login to dashboard .
• Navigate your way to edit HTML(expand widget template)
• AND use your browser search to find .post
  

.post is responsible for post layout and its style & it may have few CSS propertes like :

.post {
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynZAByFxfHXh_vSV6q-67SWYy5GP2szdpNXhvpe1i6U-eMd-hP1q8bKKN5mihhB2hBF6t3YExPnIk4hW0NTlkGLGD_MiH2Yl9KNSHz5vgzhWJ1UyFW2_6iBZvNmrEIlVMLvM4QEka-x28/s1600/box-bgr.gif) repeat-x top;
    float: left;
    width: 475px;
    margin-bottom:5px;
    padding: 10px;
        overflow:hidden;
        border:1px solid #cfcfcf;
}

Now ALL you have to do is add CSS properties Of a seperator:


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

And Dont forget to change POST-Separator-Image-Url  with your divider image url.

So now your combined code will be :

 .post {

        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjynZAByFxfHXh_vSV6q-67SWYy5GP2szdpNXhvpe1i6U-eMd-hP1q8bKKN5mihhB2hBF6t3YExPnIk4hW0NTlkGLGD_MiH2Yl9KNSHz5vgzhWJ1UyFW2_6iBZvNmrEIlVMLvM4QEka-x28/s1600/box-bgr.gif) repeat-x top;
    float: left;
    width: 475px;
    margin-bottom:5px;
    padding: 10px;
        overflow:hidden;
        border:1px solid #cfcfcf;
background: url(POST-Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom:2.5em;
margin:.5em 0 1.5em;
 }

Click On  Save Template

FINAL THOUGHT
Where to find Post separator image .Google is your friend.
 You can use These Free seperators collected from web.

 

Use comment box below If you like my posts  OR Give feedback.WE love Feedbacks.

You can follow Myfundooblog-on twitter