How to Add Breadcrumb to Blogger

5:27:00 PM |

You can add this breadcrumb to your blogger blog with the following steps.
1. Login to your account --> Design --> Edit HTML
2. Click on "Download Full Template" to backup your template.
3. Check "Expand Widget Templates"
4. Search for
<b:include data='top' name='status-message'/>
5. Add the following code below it
<b:include data='posts' name='breadcrumb'/>
6. Search for
<b:includable id='comment-form' var='post'>
7. Add the following code above it. [Select]
<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 post page -->
   <p>
    <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/>
       » Notag
      </b:if>
      » <span><data:post.title/></span>
     </b:loop>
    </span>
   </p>
   <b:else/>
   <b:if cond='data:blog.pageType == "archive"'>
   <!-- breadcrumb for archive and search pages.. -->
    <p>
     <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>
      <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>
8. Save your template and done