Add a Post Divider Between Blogger Posts

This tweak is very easy and well within the capabilities of any Blogspot blogger. Only a few simple changes to your Blogger template are required and these are in the CSS styling section.


By way of example I will use a divider that I downloaded from the internet free by searching for free divider graphics. Here are some sample dividers you can use to get started:

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4OVmiWOcX7MdSFHhIukkxhAHbZL3l6bnakiy-t0H3_AZZ040Gl5-VzFFU8OB7zt5X_UXBTbch_3iRriRJ_VZ99iSl1eGwkGF-dmflA6vvj2fn-mm8JmY6C2ZZQeaKymlIbjN3tvou3A/s400/bar1.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG3aV2Z_fo5GFJTNulqmorVHz98S5R8Cb9Bzn3RwqpGC5JYTjfUsVpGz_z24BR49P-DEckbFvOd9TuTmEOqKXikEEpSWALxCxZ5kddANm6LXlEDkdXNkkC6-UOgvjK3vWKQrYlLW0TdBI/s400/barbsmpl.jpg


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGRmv-xYaU99au8Zi7p1ZngxcHgVmv_8uKE3S5wh7CRSI4QplzaXob0YemiffT9sG9E5NWpsxHNhWoBYq6F6OvRgEhIXciMMSSv1dya2ox3Wlt6dz3zohe3I3djtQX0Z2UBwoe_RUC-_Y/s400/bar47.gif

How to Add a Divider Between Posts in Blogger

1. Login to Blogger if not already logged in
2. From the Dashboard navigate to Layout > Edit HTML
3. Back up your Blogger template as a precaution by downloading it to your computer
4. Find the following line of code in your template:
   
   

   .post {
   
   You are likely to have something like this in your template already:
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted $bordercolor;
   padding-bottom:1.5em;
   }

5. Paste the following lines of code to this block making sure you paste them before the closing curly bracket:
   
   

   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;

6. If any lines are duplicated remove them.
7. Remove any line beginning with: border-bottom: eg
   
   

   border-bottom:1px dotted $bordercolor;

8. You will now have a block of code which looks like this plus any extra lines from the existing code in this block:
   
   

   .post {
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz08XtblVthwuf5Bg1MnmHRsjxyiB_NuEXzL_EtpTtPX3d2LF-oaATvltXLp2uce_G7AZDVIZsvcKwH4scR7Z1WoNUemaY8eR1sHjK77PIpo2WAjhPTXozYy2bY0gVyx7N1HmeX9wyJTQ/s400/ribbon.gif);
   background-repeat: no-repeat;
   background-position: bottom center;
   margin:.5em 0 1.5em;
   padding-bottom:1.5em;
   }

9. Click on Save Template to save your changes
10. Click on View Blog to see your new post divider between posts