Add Breadcrumb Navigation to Blogger Blogspot

Breadcrumb is simple navigation above your posts. It has multiple benefits. First of all it improves your blog navigation but it also make your website search engines friendly.

Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

Using this post as an example a breadcrumb might be Home > Navigation > Add a Breadcrumb to Blogger Blogspot Blog. In cases where there is more than one label this hack uses the last label listed. If a visitor wanted to look at other posts about navigation all they need do is click on the "Navigation" link in the breadcrumb and they will be taken to a page which will show them all the posts with the "Navigation" label.
Here is an example of Breadcrumb Navigation.

Home > Label > Post Title

How to install Breadcrumb Navigation to blogger

1. Login to your blogger ( If not logged in )

2. Navigate to Design > Edit HTML

3. Backup your blog ( Not necessary but suggested for precaution )

4. Please check the small box beside Expand Widget Template

5. Find the code ]]></b:skin>
6. Copy and paste the code below exactly above the code ]]></b:skin>

/* Breadcrumb from http://www.pakcomputerguru.blogspot.com/
----------------------------------------------- */
.breadcrumbs {
      padding:5px 5px 5px 0px;
        margin: 0px 0px 15px 0px;
      font-size:100%;
        line-height: 1.4em;
      border-bottom:3px double #e6e4e3;
      }
7. Find the following code in your template :
<div class='post hentry uncustomized-post-template'>  or <div class='post hentry'>
8. Copy and paste the code below exactly below the code <div class='post hentry uncustomized-post-template'> or <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <b:else/>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <div class='breadcrumbs'>

             Browse &#187;  <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 == &quot;true&quot;'> &#187;
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                  </b:if>
          </b:loop>
      &#187; <span><data:post.title/></span>
           </b:if>
        </b:loop>
            </div>
        </b:if>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs'>
      Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
      </div>
      </b:if>
      <b:else/>
        <b:if cond='data:navMessage'>
      <div class='breadcrumbs'>
      <data:navMessage/>
      </div>
      </b:if>
      </b:if>
10. Save Template

Now you are done. See result in your posts. Following is result on my blog