BREADCRUMB TRAIL NAVIGATION FOR BLOGGER

Views

Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

Typical breadcrumbs look like this:

Home page > Section page > Subsection page

or

Home page : Section page : Subsection page

Screenshot of my breadcrumb navigation:

HOW TO INSTALL BREADCRUMB NAVIGATION ON BLOGGER?

• Go to your Blogger Dashboard
  
• Template
  
• Edit HTML
  
• Proceed
  
• Click “ Expand Widget Template”
  
• Press (CTRL+F) Search Shortcut
  
• And find this piece of code
  

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

• And just ABOVE/BEFORE that paste this code

<b:include data='posts' name='breadcrumb'/>

• Now find this another piece of code

<b:includable id='main' var='top'>

Note: if you found two of this code, paste the code on the second one

• Paste this code snippet ABOVE/BEFORE that code,

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

NOTE: This code will only display the last label of the post in the breadcrumb.

If you want to display all the labels, then you will have to remove those 2 bolded lines of code. 

CUSTOMIZATION OF BREADCRUMB NAVIGATION\

• Go to your Blogger template
• Customize
• Click Advance and paste this to the CSS box
• Apply any changes that you desired

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

YOU CAN SAVE YOUR TEMPLATE NOW

The Breadcrumb navigation trail should be visible on your blog now.

CREDITS

The original idea comes from http://www.bloggerplugins.org and with all the respect, All due credits go to them alone.