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.

How to add a post divider between posts in Blogger
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/AVvXsEgTBMBYmstBNI2OqQ1Mlx9FC19aSH_sJQExYp5qZOKCDzUYP0uMEgBy4paQ2izfAE0GrTb2i28HvExLpcr4xfnDnt2s6ywIAET7TfDpQIcAdq1kqgIj0w_oi1Y26GfMlvSA0InNcpj2kbg/s400/ribbon.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj96fzEdckteXr5kiLVTcA6vte8thupl-Ap5wExUPhNfYGNGrzn6koSczH4r6vjBKeIh6_LQXOxrNeyF0KM3eoq80NP3oQ7sEdgAkqs5O0eVIi6dktVtBh_005buD-T6OcampbAFdye5s4/s400/bar1.gif


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXMhXhjk1rvrNJkN-5RTVyarjeAqaeqbXI0HTT-nyg8IFrP7qP13tE42mv9vL2Ia9nd_S8KxOD9m9MYFynbLjy1z9-AkiNlOU2Kpno4ObPcCOtW5x49XEZfWZvR1kJLJHVfP1RiWyiy8/s400/barbsmpl.jpg


URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCM7Yu4dsWF9ZSQqf6rwJC2S68rgmoXZBfQX15uWoMe2U_37YUSoX4XPGVL_UNQSQwf763KCVy_UBQAfLQxPwrRJWZC4qKUdUl7vOgx13e4OVD1sEaESNkHuQF88goGmAShhHND3VttGE/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/AVvXsEgTBMBYmstBNI2OqQ1Mlx9FC19aSH_sJQExYp5qZOKCDzUYP0uMEgBy4paQ2izfAE0GrTb2i28HvExLpcr4xfnDnt2s6ywIAET7TfDpQIcAdq1kqgIj0w_oi1Y26GfMlvSA0InNcpj2kbg/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/AVvXsEgTBMBYmstBNI2OqQ1Mlx9FC19aSH_sJQExYp5qZOKCDzUYP0uMEgBy4paQ2izfAE0GrTb2i28HvExLpcr4xfnDnt2s6ywIAET7TfDpQIcAdq1kqgIj0w_oi1Y26GfMlvSA0InNcpj2kbg/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