Make Breadcrumb Navigation in blogspot

If you look at the picture beside, this widget can be used as "page history" of your blog post. Breadcrum-navigation will show you the location of your post systematically. From Home - label - or search in your archive. And in now, I will tell you How to make Make Bradcrumb Navigation in blogspot

I hope you have a backup of your blogger template before di this Hack. You can download your template by clicking "Download full template" in Edit HTML section.

Follow this step carefully :

Go to Edit HTML tab ( I suggest back up your template first )
Then give thick mark in "Expand widget template"
Then put this code after </b:skin> code :

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

After that, find <div class="post uncustomized post template"> code. or just search the "uncustomized" text. Then put this code after the code :

<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>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<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:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
Finish ! Save your template :D

And now, look the top of your post ( in single post mode or full post ). You have added Breadcrumb Navigation in your blog. If you have any problem, please leave comment here.... :) Happy blogging ... :$