Adding Breadcrumb Navigation to Blogger

 
               Many forums have breadcrumb which lets you navigate from one label to another , similarly even wordpress has plugins for that one , its even possible in blogger [ blogspot blogs ] by tweaking blogger template which is one of the best blogger hacks and recommended for all . However , on the main page of my Blog there is no breadcrumb, because that is Home but as soon as you click on a particular blog post or on a label or an archive entry, you will see how the breadcrumb will be automatically visible on top of the page :
Browse » Home » Tutorials » Adding Breadcrumb Navigation to Blogger
Below is a step by step walk through which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions , so here is an easy piece of code to add breadcrumbs !
Step 1:      Save your template by going to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it on your PC . If anything goes wrong, upload it again and your blog style will be same , no damage to blog posts will occur just there can be messing up of widgets and abnormal design can occur mistakenly !

Step 2:
       Expand the widget template

Step 3:
         Scroll down through your expanded widget code and look for this code :

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

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

<data:adStart/>


Step 4 :
Now our job is very simple , just replace the gap with below code , it should look like this

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

You have to add the RED code in between gaps on 3rd step !

Step 5 :
Now , Immediately search for <b:includable id='main' var='top'>
and add this code above it !

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<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: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:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Step 5 : 
Its better to add CSS to the skin 
Search for  ]]></b:skin>

and add this code above  it

<b:skin><![CDATA[/*

....

.breadcrumbs {
  float: left;
  width: 590px;
  font-size: 11px;
  margin: 5px 10px 20px 10px;
  padding: 0px 0px 3px 0px;
  border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 6 :
Your job is over , don't ever forget to SAVE YOUR TEMPLATE !

SEO Benefits of a Breadcrumb :
        Anchor text such as labels tells search engines about the subject of the linked page and thus its very helpful in optimizing SEO. Search engines view a breadcrumb with a text link to relevant keywords in the post as important. Apart from improving the navigation of your blog adding a breadcrumb has many cool uses , hence its better and recommended for bloggers to add and improve navigation of a Blogger Blogspot blog by adding breadcrumb navigation as  Google treat anchor text links as important.
So it really helps ! Also , 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.
Enjoy this Blogger Hack  !