Breadcrumb Navigation Widget for Blogger

Breadcrumb Navigation for Blogger - In simple terms, the function of breadcrumbs is to show the location of the web page being visited and provides features one-click access to web pages on it. Breadcrumb navigation is useful if your blog has multiple levels menu / hierarchy.

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. Breadcrumbs typically appear horizontally across the top of a web page, usually 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. - Wikipedia

Breadcrumb Navigation for Blogger

• If you use Wordpress, you can use one of the many plug-in to display breadcrumbs. But if you're using Blogger, you have to slightly change your blogger template to display the breadcrumb.

• The following are steps you should do to display the breadcrumb navigation for Blogger .

Steps to Integrate Breadcrumb Navigation for Blogger

• Make sure you to backup your blogger template first.
• Tick Expand Widget Templates Box.
• Now find the line that contains the following code:

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

• Replace with following code:

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

• Next, find the line that contains the following code:

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

• And replace that line with these:

<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'>
<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    "?&max-results=5"' 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"'> 
<!-- breadcrumb for the label archive page and search pages.. -->
<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'>

• The next step is to integrate CSS into the template. You can make changes the following CSS to suits your needs. Now find ]]></b:skin> tag, and place the following code before the ]]></b:skin> tag.

.breadcrumbs {
margin: 0px 0px 15px 0px;
padding: 7px 10px;
background: #CCCCCC;
border: 1px solid #000000;
}

• The final step is to save your template changes and see the result :)

If your post has more than one label, then the last label will be used as the breadcrumb. To limit the number of posts you want to display, you can change the numbers contained in the max-results=5 tag on line 15. Here are few references that you can use to integrate Breadcrumb Navigation for Blogger.