Monday, September 10, 2012

Add Breadcrumb Navigation Widget For Blogger

In this tutorial you can know how to add breadcrumb-navigation to your blogger. Actually this help your visitors to track their position by the post.This navigation appear on top of your post.So, you can try it.Follow these steps to add it to your blog.


1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    <b:include data='top' name='status-message'/>

4. Replace above code with below code.

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

5. Now Find this code  by using Ctrl+F <b:includable id='main' var='top'>

6. Replace above code with below code.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
Browse &#187; <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><></a>
&#187; Uncategorized
&#187; <span><data:post.title/></span>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/>
<b:includable id='main' var='top'>
7. Now Find this code  by using Ctrl+F  ]]></b:skin>
8. Paste below code before  ]]></b:skin> code 

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

9. Now save your template
 you are done.

1 comment:

  1. i want to use rel=nofollow for this widget, so that the search engine not crawl it..
    where should i put that ??