Saturday, September 5, 2009

Breadcrumb Widget for Blogger

For those who unaware "Breadcrumb" is a navigation system that shows to the user where he is in the site. Unlike normal navigation it is doing some guidance by providing the current location of the user.

Breadcrumb Navigation

Wikipedia definition for breadcrumb
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.

  • Installing Breadcrumb
1. Go to Edit HTML blogger
2. Take a Backup of your template and Expand the Widget templates (check expand widget box).

3. Now find this piece of code.
<b:include data='top' name='status-message'/>

And replace it with the

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

4. Next find the
<b:includable id='main' var='top'>

Replace it with the code below.


<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' 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'>


And the final part, let’s make your Breadcrumb more stylish, you can define any preferred setting also. Find the ]]></b:skin> and place the code below just above it.

0 comments:

Post a Comment