The Blogger™ Tutorials: 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'>

<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'>

<div class='blog-posts hfeed'>

<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'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <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>
» <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » 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 !