8 Steps To Add Breadcrumb Navigation to Blogger
Breadcrumb navigation, or breadcrumb trail, is an aid that allows website visitors to keep track of their location within the hierarchy of the website. The breadcrumb navigation is typically located horizontally across the top of a web page below the title and header of the page.
Breadcrumb navigation for Blogger Blogs typically looks like this:
Homepage > Label > Post Title
Advantages
Including breadcrumb navigation on a website helps improve the usability of the website. Breadcrumb navigation is a user friendly navigation system, which allow visitors to jump back to labels and view realted posts.
Installation
1. Login to Blogger
2. Go to Template then Edit HTML
3. Check Expand Widget Templates.
4. Search for:
<b:includable id='post' var='post'>
5. Copy the code below and paste immediately after the previous tag.
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<ul class='bcrumb'>
<span typeof='v:Breadcrumb'><li class='first'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></li></span>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<li><span typeof='v:Breadcrumb'> <a expr:href='data:label.url' property='v:title' rel='v:url'>
<data:label.name/>
</a></span></li>
</b:loop>
<b:else/>
<li>Unlabelled</li> </b:if>
<li class='last'><data:post.title/></li>
</b:loop>
</ul>
</div>
</b:if>
7. And before it paste this code:
.breadcrumb {margin-top:2px;margin-bottom:2px;}
.bcrumb {padding:1px;font-size:small;}
.bcrumb li {display:inline;padding:0px 1px;}
.bcrumb li a {color:#000;text-decoration:none;}
.bcrumb li a:hover {text-decoration:underline;}
.bcrumb li:after {padding-left:5px;content:'\00BB';}
.bcrumb li.last:after {content:'';}
8. Finally save template.
