How to add Breadcrumb Navigation to Blogger?

[Gonzalez]

How to add breadcrumbs to blogger blogs?

1. Sign in to your blogger dashboard

2. Navigate to "Edit Html" under the "Design" tab

3. Click on "Expand widget templates" so that you can insert the code snippets between widgetized area of your blogger template

4. Copy this code snippet:<b:include data='posts' name='breadcrumb'/> and paste it just below <b:include data='top' name='status-message'/>.

5. Now replace the code line <b:includable id='main' var='top'> with the code given below

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> 
<b:else/> 
<b:if cond='data:blog.pageType == "item"'> 
<p class='breadcrumbs'>
<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/>
»Unlabelled
</b:if> 
» <span><data:post.title/></span> 
</b:loop>
</span>
</p> 
<b:else/> 
<b:if cond='data:blog.pageType == "archive"'> 
<p class='breadcrumbs'> 
<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 class='breadcrumbs'>
<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>
<b:includable id='main' var='top'>

6. Now its time for styling your breadcrumb navigation using css:

.breadcrumbs {
background:#fff;-moz-border-radius-topleft:2px;-moz-border-radius-topright:2px;-webkit-border-top-left-radius:2px;-webkit-border-top-right-radius:2px;-moz-border-radius-bottomleft:2px;-moz-border-radius-bottomright:2px;-webkit-border-bottom-left-radius:2px;-webkit-border-bottom-right-radius:2px;
padding:5px 5px 5px 5px;
margin: 0px 0px 0px 0px;
font-size:95%;
line-height: 1em;
}

Paste this css code just above the ]]></b:skin> tag.