How to Add Breadcrumb for blogger blog

All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don't know what a breadcrumb is,here is a little defenition from wikipedia.

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. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

The trails like Home >> Label >> Post Name are the breadcrumbs.

So Now lets get Started :

  1. Login to your blogger dashboard
  2. Go to Layouts and then Edit HTML
  3. Then I would Sugguest you download the whole template first then Continue Editing.
  4. Then Tick the Expand widget Template.
  5. Now find for this Code :
    <b:include data='top' name='status-message'/>
  6. Now Replace it with the below code :

    <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>
  7. Now Find :
    <b:includable id='main' var='top'>
  8. Now Replace the 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: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'>
  9. Now Find ]]></b:skin> and replace it with the below code :
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>

Now you should have a working breadcrumb navigation on your system.

  • abeecdick’s virtual room

    nice tips.
    alike this tips,
    i want to try at my blog.
    thanks

  • Ritesh Sanap

    @abeecdick's virtual room
    You are most welcome if you like our service then do subscribe to it.

  • klerat

    thanks Im subscribe this

  • http://spuser.blogspot.com Hador

    I tried this on my blog, and it worked fine.

    However, I was a little disapointed at seeing that only one label was displayed. Of course the blog engine has no way of knowing which ordering I want for my labels, but perhaps there is a way of telling it in the template?

    One solution could be something like:
    SharePoint is priority one, C# is priority two, Custom fields is priority three etc..

    Then a post with labels SharePoint and Custom fields would have the breadcrumb
    Home>SharePoint>Custom fields>[post title]

    How would such a template code look?

  • Toufeeq

    That was a nice trick. Also I have heard breadcrumb helps SEO! So, thank you for not only providing the trick of adding breadcrumb but also for optimizing my blog a bit. :)

    • http://www.best2know.info/ Ritesh Sanap

      Toufeeq,
      Thank you for appreciating my work.

  • http://maxi-hile.blogspot.com Epd

    Thanks a lot.

  • http://geekworldnews.blogspot.com geek world news

    First thanks for your best tutorials.
    but please also add demos when you post new tutorials.
    Because some time reader are not identify that which tutorials you posted when thanks best of luck.
    Nice blog.

    • http://www.best2know.info/ Ritesh Sanap

      Thank you for suggestion geek world news i will be looking forward to it.

  • http://blog.najiullah.com ahmad najiullah

    Any Demo for this script????

    • http://www.best2know.info/ Ritesh Sanap

      Sorry No Demo :(

  • Rajeeb

    Its not working for me please help

    • http://www.best2know.info/ Ritesh Sanap

      Rajeeb, i visited your site and the breadcrumbs are successfully working