How to Add Breadcrumbs in Blogger to gain SEO Advantage

I suggest every blogger who uses blogger as a blog hosting platform, should add breadcrumbs in blogger to gain SEO Advantage as well as ease of use, The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Home >> Post Name are the breadcrumbs.

so below is a step by step tutorial on how you can add breadcrumb navigation for blogger.

Go to your blogger > Layout > Edit HTML.

Note: Backup your template and choose to Expand the Widget templates.

Now Find this piece of code.

  

   <b:include data='top' name='status-message'/>




Replace the above code with this code




<b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/>

Now find


   <b:includable id='main' var='top'>


and Replace it with


   <b:includable id='breadcrumb' var='posts'>
   <b:if cond='data:blog.homepageUrl == data:blog.url'>

   <!-- No breadcrumb on home page -->

   <b:else/>

   <b:if cond='data:blog.pageType == "item"'>

   <!-- breadcrumb for the post page -->

   <p class='breadcrumbs'>

   <span class='post-labels'>

   <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

   <b:loop values='data:posts' var='post'>

   <b:if cond='data:post.labels'>

   <b:loop values='data:post.labels' var='label'>

   <b:if cond='data:label.isLast == "true"'> »

   <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

   </b:if>

   </b:loop>

   <b:else/>

   » Unlabelled

   </b:if>

   » <span><data:post.title/></span>

   </b:loop>

   </span>

   </p>

   <b:else/>

   <b:if cond='data:blog.pageType == "archive"'>

   <!-- breadcrumb for the label archive page and search pages.. -->

   <p class='breadcrumbs'>

   <span class='post-labels'>

   <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for      <data:blog.pageName/>

   </span>

   </p>

   <b:else/>

   <b:if cond='data:blog.pageType == "index"'>

   <p class='breadcrumbs'>

   <span class='post-labels'>

   <b:if cond='data:blog.pageName == ""'>

   <a expr:href='data:blog.homepageUrl'>Home</a> » All posts

   <b:else/>

   <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under     <data:blog.pageName/>

   </b:if>

   </span>

   </p>

   </b:if>

   </b:if>

   </b:if>

   </b:if>

   </b:includable>

   <b:includable id='main' var='top'>

Now find
]]></b:skin>

and Replace it with the code given below


   .breadcrumbs {
   padding:5px 5px 5px 0px;
   margin: 0px 0px 15px 0px;
   font-size:95%;
   line-height: 1.4em;
   border-bottom:3px double #e6e4e3;
   }
   ]]></b:skin>


We have done!, now you can check your breadcrumb working in your blog.

If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.

if you have any query you can always comment here!