Web Tech Guide

www.blogsmonetize.com feed

How to Add Breadcrumb to Blogger

 

Having a breadcrumb on your blogger will absolutely make your blog look better.  The breadcrumb will help the visitors keep track of their locations. It can enhance the way your visitors navigate around your website. By offering a breadcrumb on a multi-level website,  your visitors can navigate to higher level categories more easier.

Breadcrumb for Blogger

You can add this breadcrumb to your blogger blog with the following steps.

1. Login to your account --> Design --> Edit HTML
2. Click on "Download Full Template" to backup your template.
3. Check "Expand Widget Templates"
4. Search for

<b:include data='top' name='status-message'/>
5. Add the following code below it
<b:include data='posts' name='breadcrumb'/>
6. Search for
<b:includable id='comment-form' var='post'>
7. Add the following code above it. [Select]
<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 post page -->
<p>
<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/>
» Notag
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for archive and search pages.. -->
<p>
<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>
<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>
8. Save your template and done
You can view a live example here.

© 5/24/2011 06:10:00 PM www.blogsmonetize.com
Loading related posts...

0 comments:

Post a Comment