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.

Here is a screenshot of a Breadcrumb Trail

Breadcrumb for Blogger

Now that you know what a breadcrumb is , let us get into the details of adding the same to your Blogger Blog.

1. Go to Template > Edit HTML and  check the check box which says Expand the Widget Templates.

2. Now in the Template, Find

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

and immediately above that, paste this line of code

<b:include data='posts' name='breadcrumb'/>

3. Now find

<b:includable id='main' var='top'>

If you find two occurrences of this, then locate the second one(locate the only one otherwise) and immediately above that paste this code snippet

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:if>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 green lines of code.

4. Save the Template

5. If you want to make the breadcrumb smaller then go to Template Designer > Advanced > Add CSS and add the following Snippet there and Apply the changes

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

Now you should have a working breadcrumb navigation on your system. The original breadcrumb idea is based on Hoctro's Code from HOCTRO  breadcrumb hack. It has been modified to accommodate Search Pages, Label Pages and Archives.The post breadcrumb uses RDF breadcrumb Markup to assist you in displaying breadcrumbs in Google Search Results.

100 comments :

  1. Buddy .this post was Useful .Thanks

    ReplyDelete
    Replies
    1. Yes ! It's useful and 100% working Tutorial.thanks

      Delete
  2. I am sorry for commenting here as your contact option isnt working...i want to ask a question regarding the meta tags for individual posts...if i want to add meta tags for each post then wouldnt the template become very big as i would have to add it in the head section

    Sorry for commenting here...waiting for ur reply

    ReplyDelete
  3. i have moved it to the appropriate post http://www.bloggerplugins.org/2008/06/meta-tags-for-blogger-blogspot.html

    ReplyDelete
  4. Can't get this one to work. I get the following error:

    We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:widget" must be terminated by the matching end-tag "".

    ReplyDelete
  5. Thanks again! This is a brilliant trick. Makes navigation much better.

    ReplyDelete
  6. i like it but some how i found it a bit difficulty to install your widgets

    ReplyDelete
  7. @CLEMENT SANGA what difficulty did you encounter when installing the breadcrumb widget.. let me know and i will try to help you out..

    ReplyDelete
  8. Sensational thanks!!!

    Two questions:
    1) how do I control the space between HOME>>and the label?

    2) Can I change the >> symbol?


    Again thanks this is smashing!!!

    ReplyDelete
  9. @... yea offcourse you can change that replace all » in the code i have given with anything you want..

    ReplyDelete
  10. Great! Thanks for replying

    So..

    a) what is the exact piece of code that makes the >> symbol

    b) which element in css manipulate to add space between HOME and >> and LABEL?

    Thanks!

    ReplyDelete
  11. check the code here .. not the one that is in blogger template now .
    <b:if cond='data:label.isLast == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>

    See the coe dont you see a >> in this..??
    Similarly there are more in the code i have given in this page... First copy out this code from this page,paste it into notepad or something and then paste it into your blogger template.. Space is added by just using a space here.. No CSS is used..

    ReplyDelete
  12. thanks buddy! it works!
    thanks thanks thanks!!!!
    :)

    ReplyDelete
  13. Thanks for this tutorial, it is great and very helpful.

    Thanks
    Alam
    twitter.com/alamest

    ReplyDelete
  14. tq for tricks..

    but it is now actual breadcrumb..

    The actual breadcrumb will record the travel from homepage to child pages...

    but this plugin.. just show.. the hirarchy structure of entries.

    Aniway.. this plugin.. is good to increase functionality of blog...

    ReplyDelete
  15. how can i manage if my post have more than 1 labels ???

    ReplyDelete
  16. see what i am getting here, http://www.geekblogger.org/2009/11/how-to-get-feedburner-subscribers-email.html , help me to solve this.

    ReplyDelete
  17. @Piyush,
    if you have multiple labels on a post, then it will use the last label only.. I believe that you modded the code and got it wrong..

    ReplyDelete
  18. Can you tell me how can i add XML code into my blog post ??? in Blockquote Section i want to put XML Code. Help me as soon as possible.

    ReplyDelete
  19. How i can add XML code in my post ?? like you have put above
    example : >b:include data='top' name='status-message'/>

    ReplyDelete
  20. Help, I get the following error:

    We were unable to save your template

    Please correct the error below, and submit your template again.
    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The element type "b:widget" must be terminated by the matching end-tag "".

    I don't what's wrong..

    ReplyDelete
  21. thanks its very useful, especially for a newbie like me ...

    ReplyDelete
  22. thanx dear..

    http://mamusoft.blogspot.com/

    ReplyDelete
  23. thanks it's working .

    demo : http://www.moneybuilding.co.cc/2010/03/hyifundcom.html

    ReplyDelete
  24. I see many SEO or Blogger Tweak Blog, no one wrote so concise, precise, clear and it works. All the plugins here is so super crisps and direct.

    ReplyDelete
  25. How do I put the breadcrumb on bottom of the post instead of on top?

    ReplyDelete
  26. @Ahmad - add <b:include data='posts' name='breadcrumb'/>
    below <data:post.body/>

    ReplyDelete
  27. Beautiful dude... works on my blog real nice. Thanks a lot.

    ReplyDelete
  28. Does anyone knows how to change the font color?

    ReplyDelete
  29. Great solution works terrific however i am not getting more IE8 crashes when doing a lot of updates and QA'ing my blog any ideas?

    http://williamtellstradecraft.blogspot.com

    Thanks in advance.

    ReplyDelete
  30. bro... its not working in my blog... kindly help me to check it out...

    http://kai2en.blogspot.com

    ReplyDelete
  31. wow nice tut its working...thanks a lot

    funaroundus.blogspot.com

    ReplyDelete
  32. Hi! Is there a way to show all labels not only the last one? Thanks!

    ReplyDelete
  33. Is there a way to show all labels? or is there any work around to show first label instead of last?

    ReplyDelete
  34. Can anyone help me here? On every individual post page (the page with only one post) there's a grey line above the date and header. I've tried to get rid of it, and can't. Thanks. I've included an image. http://img43.imageshack.us/img43/9234/screenshot2nw.png

    ReplyDelete
  35. @D0ct0r11 - that border was intentionally added via this line of code
    border-bottom:3px double #e6e4e3;

    take that off if you don't want the border.

    ReplyDelete
  36. Here is the HTML code before "]]>" on my blog, .breadcrumbwrap{padding:0;width:578px;background:#FFFFFF;border:1px solid #c1c1c1}
    .breadcrumbwrap ul{margin-top:0;}
    #crumbs{list-style-type:none;margin:0;padding:0;height:2.3em}
    #crumbs li{float:left;line-height:2.3em;color:#777;padding-left:.75em}
    #crumbs li a{background:url(http://1.bp.blogspot.com/_Sd8u52mpBRQ/TD6ZdH0AJzI/AAAAAAAAATg/kIQecqvuYaw/s1600/crumbs.gif) no-repeat right center;display:block;padding:0 15px 0 0}
    #crumbs li a:link,#crumbs li a:visited{color:#777;text-decoration:none}
    .author_pic{width:80px;float:left;margin:0 10px 0 0}
    .author_text{width:448px;float:left;margin:0}
    #blog-pager {clear:both;}
    ]]>

    Thanks if anyone can help. Please read my first comment.

    ReplyDelete
  37. Thanks a lot. but How can I show the first label instead of last?
    i tried the

    data:label.isLast

    I changed to

    data:label.isFirst

    but seems not working and the other one

    data:label.isLast != "true"

    but it shows all of the labels except the last. Please help me with this,,

    ReplyDelete
  38. thank u :) for this important post, it works with me ;)

    ReplyDelete
  39. well this was a useful tut, but i have an issue which is that no matter i do to the breadcumber css it has no effect on it,
    i want to use borders for it, in inset or outset, but its not working.
    Its not that i don't know css if i am not good in it but i am also not a newbie, but still i failed.
    and this is not only with this breadcrumb but also with the numbered page navigation, its really weird but i am not able to find a solution.
    i would really appreciate help from you, as i don't have anyone around to help me.
    thanks in advance.

    ReplyDelete
  40. how can i remove this crumps from my blog, it doesnt look nice

    ReplyDelete
  41. thank you very much you have helped a lot. i was looking for this plugin for a long time but i did not find it cos i did not know its name "breadcrumbs"

    ReplyDelete
  42. At last I have found this feature. Works great for me. Thanks.

    ReplyDelete
  43. Dear sorry i can not find this



    in my blog

    ReplyDelete
  44. im newbie, can you tell me with picture cause i don't understand. sory my english not good :p

    ReplyDelete
  45. Thanks for this one! It really works guys! I used this on my site...

    ReplyDelete
  46. It works. But I don't really like the since this limits us to only one label in the breadcrumb. What if I want to display my labels as a hierarchy?

    For example, if I have used the labels SharePoint and Fields on the same blog, then I would like to display Home > SharePoint > Fields > MyPostTitle, because I consider SharePoint to be a 'main label', and Fields to be a 'sub label' beneath SharePoint. Likewise, I might have a 'main label' called TFS, and a sub level called Work Item. These I would like to display as Home > TFS > Work Item > MyPostTitle.

    Any idea how to do this?

    ReplyDelete
  47. Thanks for this. Thank God I found this blog.
    Kamsahamnisda!

    ReplyDelete
  48. where to find breadcrumb?
    its not visible anywhere on page?

    ReplyDelete
  49. Hey its Working ..I thought it will not worki ..but it working !!!Thnx a lot

    ReplyDelete
  50. Breadcrumbs is nice, but is there a way to show all the labels that the post is under. Please let me know. Thanks

    ReplyDelete
  51. Awesome TUT man. I just loved this one. I am a regular visitor to your blog and it is brilliant, excellent and I find mind blowing tricks over here.

    Thanks a lot for this post :)

    ReplyDelete
  52. :( where to find breadcrumb?
    its not visible anywhere on page?

    ReplyDelete
  53. help me, after i change my template and i add this breadcrumbs again, and it's not visible on my page, i can't find the breadcrumb.....please look http://namakueva.blogspot.com, thanks

    ReplyDelete
  54. Thank you so much for this! It works perfectly!

    ReplyDelete
  55. how to disable breadcrumbs on particular page (particular label)
    i.e. i don't want breadcrumbs link to be shown on certain label/pages

    tnx!

    ReplyDelete
  56. Thanks. I tried it on my blog and it looks really nice but the hiperlinks dont work, could you please help? Thanks
    http://path2yoga.blogspot.com/

    ReplyDelete
  57. it seems this hack doesnt work on all blogger template, i have tried this over and over again but it isnt working http://www.trueinternetworld.com

    ReplyDelete
  58. Thanks. I tried it on my blog and it looks really nice but the hiperlinks dont work, could you please help? Thanks

    http://sharemarkettipsfree.blogspot.com/

    ReplyDelete
  59. showing no errors but not appearing on blog??

    ReplyDelete
  60. When I share my blog posts in Facebook then in the description this comes:

    "You are Here:....and so on"

    Can anyone help me...I want to post snippet in the description. Hepl me please.

    ReplyDelete
  61. I successfully added snippets but it is not showing up in my blog: Download Shirdi Sai Baba Bhajans Mp3 Artis...

    ReplyDelete
  62. @Hetal Patil Rawat - In step 3, you must have seen two occurrences of that line. Try pasting above the one which you haven't already tried, and it should come up.

    ReplyDelete
  63. I can not locate the second (then locate the second one).

    ReplyDelete
  64. @Lică - then paste it above the first one.

    ReplyDelete
  65. @Blogger Plugins, I have been following this code from many blogs. but I got the error as:
    "The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements."
    Do you have any solution for this?

    ReplyDelete
    Replies
    1. @Hyderabadi, Can you please share to me if your problem with regards to this have been solved. What did you do?

      Delete
  66. @Blogger Plugins, another interesting thing for which I have been trying is ... to show the related month archive link in the breadcrumb navigation for a particular post.
    for example ... if there is a post (named as "Breadcrumb navigation") with label "tutorials" in december-2011, then the breadcrumb navigation above this post should show like this:
    Home » 2012/12 » Tutorials » Breadcrumb navigation
    I think we can get the month archive name of the post as [data:post.dateHeader/] & then thru javascript we can split the year and month and can even specify the URL to the particular month. Is it possible?

    ReplyDelete
  67. Thank you...this was very useful,

    ReplyDelete
  68. Hai dude can i change the colours..??

    ReplyDelete
  69. Thanks, It worked on one of my blogspot blog.

    ReplyDelete
  70. Thanks for the post.
    It worked for me and I am really thankful to you for the awesome trick.

    ReplyDelete
  71. Wow! very informative post, thank you very much

    ReplyDelete
  72. Brother, it doesn't work in my blog... How to fix it???

    ReplyDelete
  73. this tutorial that I have been looking for thanks for sharing this one

    ReplyDelete
  74. Doesnt work for me on this address http://bzivkovicsavke.blogspot.com/, maybe is problem because I changed default Home to Početna (Serbian)?

    ReplyDelete
  75. did not worked for me. my site is http://spy-tools.blogspot.com/. please help.

    ReplyDelete
  76. ahay... work bro... thank you very much :D

    ReplyDelete
  77. Can you upgrade this plug-in code for the new templates and updated blogger? I just put it on my blog but it doesn't show. : (

    Thanks,

    L

    ReplyDelete
    Replies
    1. the code mentioned in Step 2 will be present twice in your template(one for the mobile view and the other for the regular view). So you have to pick the right one :)

      Delete
  78. Very awesome tutorial. thank you!

    ReplyDelete
  79. thanks for the great tips I am gonna use this

    ReplyDelete
  80. Its not working for me please help http://nptechs.blogspot.com

    ReplyDelete
  81. Thanks!
    its Working NOW!

    See the Rich Snippet Preview here: http://goo.gl/0sTFP

    ReplyDelete
  82. Hi, admin. I'm a having problem installing this, I'm getting error in my blog like this one...

    The widget with id "Blog1" contains at least two b:includable elements with the same id: "breadcrumb". All b:includable elements should have a unique id for a given widget.

    Please help me. Thanks!

    ReplyDelete
  83. i got same error !!!!!!!!!!!!!

    ReplyDelete
  84. I can not make the breadcrumbs on my blog:
    I use the new template html5. template picture windows.
    Anyone know? help me please.

    ReplyDelete
  85. I exchange the whole code as you mentioned above but I am getting the following error on preview.
    "More than one widget was found with id: Navbar1. Widget IDs should be unique.
    Error 500"

    Pls help me out of this

    ReplyDelete
  86. Not working on my template:

    "The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements."

    Any solution?

    ReplyDelete
  87. Great post I really got my answer and trick works too keep posting admin. Once again Thank you

    ReplyDelete
  88. thank you, works well on my page http://forstronglife.blogspot.com/2013/03/if-you-suffer-from-back-pain-what.html

    ReplyDelete