Danzy World*

Great site for Computer and Internet Tricks with Entertainment FUN !



Sep 3, 2009

How to add BreadCrumb Navigation widget in blogger

Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog, which would help increase viewing more posts.

How to Apply:

* Login to blogger -> Layout -> html

* Check on Expanded Widget.

* Search for ]]></b:skin> (using ctrl+f) and add the following code above it.

border: 1px solid #000000;
padding: 5px 15px;
margin: 10px 0;
line-height: 1.4em;

Note: You can set the border, padding and margin according to the way your site looks.

* Search for:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>

replace them with

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <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>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>

* Preview it first, if the page opens fine then save it.

* Open your site, navigate to any post page to see your new breadcrumb in action.


  1. good one
    this blog is just full of tips
    keep it going

  2. wonderfull tips thanks for it dude good work keep it up

    admin smsformobile2008.blogspot.com

  3. wow great it works fine for me. Keep Rocking

  4. Wow! Interesting. I may use it here http://www.fxtsignals.blogspot.com - free forex signal daily updates.