How To 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.

Can u see the divider that i have kept in my post down there!!!

Login to Blogger if not already logged in

From the Dashboard navigate to Layout > Edit HTML

Back up your Blogger template as a precaution by downloading it to your computer


Find the following line of code in your template:

.post {


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


Paste the following lines of code to this block making sure you paste them before the closing curly bracket:
background: url(<strong>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kH8ASDB9n7fDf7kMkybN-PJAs6UY25AQHdmn_nId4QRzfu7B_kSdV3gtHXpCAN9zb7fdRgDj-1w4tG1bLS7pbUbT0e9sLYrzrUIuwH49ieOd1MFquTcgpKk0Q9hgoJClhb6q5kdsnk0/s400/ribbon.gif</strong>);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:1.5em;<br />

If any lines are duplicated remove them.

Remove any line beginning with: border-bottom: eg
border-bottom:1px dotted $bordercolor;

You will now have a block of code which looks like this plus any extra lines from the existing code in this block:
.post {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kH8ASDB9n7fDf7kMkybN-PJAs6UY25AQHdmn_nId4QRzfu7B_kSdV3gtHXpCAN9zb7fdRgDj-1w4tG1bLS7pbUbT0e9sLYrzrUIuwH49ieOd1MFquTcgpKk0Q9hgoJClhb6q5kdsnk0/s400/ribbon.gif);<br />background-repeat: no-repeat;<br />background-position: bottom center;<br />margin:.5em 0 1.5em;<br />padding-bottom:1.5em;<br />}

Click on Save Template to save your changes

Click on View Blog to see your new post divider between posts


Tips
To change the divider to one of the above replace the URL address of the image with the URL address of the new image you want to use from below:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_kH8ASDB9n7fDf7kMkybN-PJAs6UY25AQHdmn_nId4QRzfu7B_kSdV3gtHXpCAN9zb7fdRgDj-1w4tG1bLS7pbUbT0e9sLYrzrUIuwH49ieOd1MFquTcgpKk0Q9hgoJClhb6q5kdsnk0/s400/ribbon.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcYFG0UqWoXb-1uS15JSvbMBxNdx0c8ssapmrftxNjGgyBk_st6igf1HmHnb-z4A35BVjZK6U98foEWML1pu3UzDVTMJgwH7U2yoPQnficKuKObZl0t1dKAUL9WaAF0bD1Jjn_xdswZ1o/s400/bar1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj88vjn98LRjfxMyfYgYSxsC9zPmgDqaX7lqvTznatRjgatxInNXnyIM96m6uxButLdYXUMAklBFqhKpr6HzjmtomKH0yX1JBb6szSLU4KsQoFOLBpiJHwVCOsQmekvuLVCCHU1bYKZR0w/s400/barbsmpl.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2h98PXhPuwfuToq7FZI_PCWxiANj_cd0SxfLs7Kl5_klE7zJrwm_vI6QAZVT_3kEjCyMLfRX_eZUu2xgdHBEr4OnnunocXWwa2_ipWE3D5pL3m1xtCOgG9eii99101uggNYCHyqH9idQ/s400/bar47.gif


In today's Blogger tutorial you have learned how to insert a divider between your Blogger posts to enhance the look of your Blogger template (Blogspot template). You can either make your own post divider or download one from the myriad of free website dividers available on the net.
.