How to Add a Post Divider Between Blogger Posts

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.


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

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/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;

   
   
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/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;
   }

   
   
9. Click on Save Template to save your changes
   
   
10. 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...!!!

• 

  Blogger Post Image Borders Change or Remove

  01/07/2012 - 0 Comments

  Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default…
• 

  How to Give Your Blogger Template Rounded Corners

  22/09/2013 - 0 Comments

  Adding css is really easy with the new Template Designer. Simply click on the design tab in you Blogger…
• 

  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…
• 

  How to Add Internal Links Within Blogger Posts

  02/07/2012 - 1 Comments

  Each link identifier needs to be enclosed in inverted commas. Make sure to match up the correct identifier…
• 

  How to Add a Twitter Profile Widget to Blogger

  15/07/2012 - 0 Comments

  If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to…
• 

  Sony Xperia Tablet Full Features Review

  28/10/2013 - 0 Comments

  Sony - Xperia ™ Tablets reviewXperia ™ Sony Tablet S has Android 4.0.3 powered by Android operating system, a…
• 

  Using Accessories to Further Enjoy Your Smart Phone

  25/10/2013 - 0 Comments

  What you are visualizing about new launched Samsung Focus smart phone? This phone has been loaded with…
• 

  How To Launch From SEO – Tips for Beginners

  07/03/2012 - 0 Comments

  When a user is new to the "Search Engine Optimization" concept (otherwise known as S.E.O.), it can be quite…

Posted in: Between,blogger,Divider,enhance,Posts,Tricks