Awesome breadcrumb navigation for blogger

Breadcrumb navigation track position of blog post when a user is viewing it.As usual  bread-crumb navigate from home >> label >>post name.it make your blog more attractive & enhance user navigation from post to label or home page.In this tutorial i will explain you how to use breadcrumb navigation in your blog(only blogger).

Follow Steps 


Step 1
In blogger account click on ' Template ' at left side of page.
Backup your template before proceeding further steps

Step 2
click on ' Edit HTML '  >>  ' Proceed ' 

Step 3
At top of window click on ' Expand Widget Templates '

Step 4
Press ' Ctrl + f ' & Find    <b:include data='top' name='status-message'/>

Step 5
Replace Every step 4 code with below code

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

Step 6
Now Find  <b:includable id='main' var='top'>

Step 7
Replace step 6 code with below code


<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page --> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <p class='breadcrumbs'> <span class='post-labels'> 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><b:else/> » Uncategorized </b:if> » <span><data:post.title/></span> </b:loop> </span></p> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <p class='breadcrumbs'> <span class='post-labels'> Browse » <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 == ""'> 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> </span></p> </b:if></b:if></b:if></b:if> </b:includable> <b:includable id='main' var='top'>

Step 8
Find   ]]></b:skin>

Step 9
paste below code above   ]]></b:skin>


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

Step 10
Save your template .