How to Add a Post Divider Between Blogger Posts ~ SEO Blogger

In today's Blogger tutorial I show you how to enhance your Blogger blog (Blogspot blog) by adding a post divider to your Blogger template. Used effectively post dividers can really jazz up your blog and will lend it that individual feel which most of us are hoping to create.

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/AVvXsEjCIyxYJpVdiVXShLbbHEtxiTmoXmin9BhBYdjFan0KAkX01iLMP_4weKDgfGEC4fORAuGl6V_DFBmEj14O5fZZVjPg8Fgjr0HgiBsd6O5yXWbxLaGF1_8Ixiof1x_Sgsdjrbcsyv3RBeA/s400/ribbon.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9B-bQWOyOGBrySeQ8ibLvP9KXvU1O_XY-O3WOl_fZZvQpbeqE4LfDzvPHyyLMowslQZmvpgbTbQ5beoDFQr6u3wDsHhbSzc7PedJFynCDdTvLOAdwT6hjHlXznZeGKNPPx6PS_bh-tE/s400/bar1.gif

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHauQ-4efOmHP2muQdHASNuCksgNOmtCgrz-PGgrnokXtf3IQXzJMDqM1B_uvLHpGpVVv3WkXdN3Qny4m_a-StgVFm6mQIl7W6GebHcakcBFVC4KNil23eHcrHO8ufnSAp-g42bKizJcM/s400/barbsmpl.jpg

URL address:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuvvpmUzmaiyJ2csb5iTq5KCsp3B8pTmrTsnZaTjuLvmwW67EOU5ZP3FAHlb6s0p5gqbyg_goDgJHjGCMK5lxEj1Qi9oM_O1buZGUvfOlOFZwYR_GyZ8iCo7r2wdZgavRgE3LXW8vuiLI/s400/bar47.gif

How to Add a Divider Between Posts in Blogger

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 {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
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/AVvXsEjCIyxYJpVdiVXShLbbHEtxiTmoXmin9BhBYdjFan0KAkX01iLMP_4weKDgfGEC4fORAuGl6V_DFBmEj14O5fZZVjPg8Fgjr0HgiBsd6O5yXWbxLaGF1_8Ixiof1x_Sgsdjrbcsyv3RBeA/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
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 {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCIyxYJpVdiVXShLbbHEtxiTmoXmin9BhBYdjFan0KAkX01iLMP_4weKDgfGEC4fORAuGl6V_DFBmEj14O5fZZVjPg8Fgjr0HgiBsd6O5yXWbxLaGF1_8Ixiof1x_Sgsdjrbcsyv3RBeA/s400/ribbon.gif);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Click on Save Template to save your changes
Click on View Blog to see your new post divider between posts

Tips and Troubleshooting

To change the divider to one of the above replace the URL address of the image (in red) with the URL address of the new image you want to use.
To use your own divider image download to your computer from the internet and then save the image to a photo image service like Photobucket. Replace the divider image URL address (in red) with the URL address of your new image
To increase the padding around the divider change the following line of code:

padding-bottom:1.5em;

to

padding-bottom:2.5em;

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.

Random Posts...!!!

Best SEO 5 Responsive Design Blogger Templates
18/08/2013 - 0 Comments
Top 5 Awesome Responsive Blogger Templates:- These days their is a lot more trend of Blogger templates.It…

Tips for Bloggers - Time Management is really important
04/06/2012 - 0 Comments
Blogging is obviously not as simple as many people think it is. Blogging is really a business and involves…

7 Tips for Google Adsense Approval
18/09/2013 - 0 Comments
Google AdSense is the best site for earn moeny and PPC (Paid Per Click) network which is being used by…

New SEO Tips For Off Page Optimization Techniques
21/09/2012 - 0 Comments
Getting the optimization of your website’s content (On Page Optimization) is only half the battle. Off Page…

Page titles SEO tag - the right way
04/02/2012 - Comments Are Off Here...
Before publishing any article, you have to chose the right page titles SEO tag for the specific post.…

Dofollow comments increase Page Rank
06/02/2012 - 1 Comments
In this simple SEO article I am going to show you how to use dofollow comments to increase Page Rank for…

Top 5 Websites to Make Money by Uploading Files
16/09/2013 - 0 Comments
Making money through easy means is always what people look for. However what is really important is the fact…

Dropbox releases applications for Windows 8 tablets
26/10/2013 - 1 Comments
Dropbox releases applications for Windows 8 tabletsDropbox has recently released an application optimized for…