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.

93 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. @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
  17. 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
  18. How i can add XML code in my post ?? like you have put above
    example : >b:include data='top' name='status-message'/>

    ReplyDelete
  19. 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
  20. thanx dear..

    http://mamusoft.blogspot.com/

    ReplyDelete
  21. thanks it's working .

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

    ReplyDelete
  22. 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
  23. How do I put the breadcrumb on bottom of the post instead of on top?

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

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

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

    ReplyDelete
  27. 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
  28. bro... its not working in my blog... kindly help me to check it out...

    http://kai2en.blogspot.com

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

    funaroundus.blogspot.com

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

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

    ReplyDelete
  32. @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
  33. 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
  34. thank u :) for this important post, it works with me ;)

    ReplyDelete
  35. 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
  36. how can i remove this crumps from my blog, it doesnt look nice

    ReplyDelete
  37. 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
  38. At last I have found this feature. Works great for me. Thanks.

    ReplyDelete
  39. Dear sorry i can not find this



    in my blog

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

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

    ReplyDelete
  42. 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
  43. Thanks for this. Thank God I found this blog.
    Kamsahamnisda!

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

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

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

    ReplyDelete
  47. 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
  48. :( where to find breadcrumb?
    its not visible anywhere on page?

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

    ReplyDelete
  50. 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
  51. 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
  52. 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
  53. showing no errors but not appearing on blog??

    ReplyDelete
  54. 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
  55. I successfully added snippets but it is not showing up in my blog: Download Shirdi Sai Baba Bhajans Mp3 Artis...

    ReplyDelete
  56. @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
  57. I can not locate the second (then locate the second one).

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

    ReplyDelete
  59. @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
  60. @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
  61. Thank you...this was very useful,

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

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

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

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

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

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

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

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

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

    ReplyDelete
  71. 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
  72. Very awesome tutorial. thank you!

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

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

    ReplyDelete
  75. Thanks!
    its Working NOW!

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

    ReplyDelete
  76. 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
  77. I can not make the breadcrumbs on my blog:
    I use the new template html5. template picture windows.
    Anyone know? help me please.

    ReplyDelete
  78. 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
  79. 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
  80. Great post I really got my answer and trick works too keep posting admin. Once again Thank you

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

    ReplyDelete