Breadcrumb for Blogger

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.

96 comments :

  1. pratikJune 2, 2009 at 12:55 PM

    Buddy .this post was Useful .Thanks

    ReplyDelete
    Replies
    1. AnonymousJuly 13, 2013 at 12:54 PM

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

      Delete
  2. Rahul JadhavJune 6, 2009 at 1:53 AM

    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. UnknownJune 6, 2009 at 2:13 AM

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

    ReplyDelete
  4. WebmasterJune 18, 2009 at 5:32 AM

    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. Strange NatureJune 20, 2009 at 9:43 PM

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

    ReplyDelete
  6. CLEMENT SANGAJune 21, 2009 at 10:55 PM

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

    ReplyDelete
  7. UnknownJune 22, 2009 at 2:20 AM

    @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. JJune 28, 2009 at 1:38 AM

    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. UnknownJune 28, 2009 at 3:07 AM

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

    ReplyDelete
  10. JJune 28, 2009 at 3:11 AM

    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. UnknownJune 28, 2009 at 3:17 AM

    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. .shakree.June 30, 2009 at 2:10 PM

    thanks buddy! it works!
    thanks thanks thanks!!!!
    :)

    ReplyDelete
  13. Fakhrul AlamAugust 15, 2009 at 6:03 PM

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

    Thanks
    Alam
    twitter.com/alamest

    ReplyDelete
  14. MansurSeptember 16, 2009 at 3:26 PM

    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. Piyush DungraniNovember 5, 2009 at 6:15 AM

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

    ReplyDelete
  16. UnknownNovember 5, 2009 at 10:06 AM

    @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. @AneeshNovember 9, 2009 at 11:18 PM

    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. Piyush DungraniNovember 10, 2009 at 10:05 PM

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

    ReplyDelete
  19. VeeNovember 11, 2009 at 1:22 PM

    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. UnknownNovember 29, 2009 at 8:24 PM

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

    ReplyDelete
  21. ..::: Munir Shah :::..February 18, 2010 at 4:50 PM

    thanx dear..

    http://mamusoft.blogspot.com/

    ReplyDelete
  22. محمد زيدانيMarch 17, 2010 at 10:22 PM

    thanks it's working .

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

    ReplyDelete
  23. HypeMarch 18, 2010 at 12:14 AM

    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
  24. UnknownMarch 28, 2010 at 12:25 PM

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

    ReplyDelete
  25. UnknownMarch 28, 2010 at 12:38 PM

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

    ReplyDelete
  26. Tonye @ True Vine ProductionsApril 10, 2010 at 11:39 AM

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

    ReplyDelete
  27. AdminMay 26, 2010 at 5:20 PM

    Does anyone knows how to change the font color?

    ReplyDelete
  28. William TellJune 1, 2010 at 8:44 PM

    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
  29. kaizen shinobiJune 5, 2010 at 1:30 AM

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

    http://kai2en.blogspot.com

    ReplyDelete
  30. NbJune 12, 2010 at 2:56 PM

    Thanks dude,cool hack

    ReplyDelete
  31. GayathriJuly 17, 2010 at 4:27 PM

    wow nice tut its working...thanks a lot

    funaroundus.blogspot.com

    ReplyDelete
  32. LauraJuly 19, 2010 at 4:20 PM

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

    ReplyDelete
  33. MonicaJuly 23, 2010 at 3:04 PM

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

    ReplyDelete
  34. D0ct0r11August 10, 2010 at 9:58 PM

    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. UnknownAugust 10, 2010 at 10:02 PM

    @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. FerdinandSeptember 12, 2010 at 2:48 PM

    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
  37. Anas HeavencomSeptember 17, 2010 at 12:37 AM

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

    ReplyDelete
  38. CryoffalconSeptember 23, 2010 at 10:00 PM

    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
  39. All About ParanormalOctober 1, 2010 at 12:12 AM

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

    ReplyDelete
  40. Sam KamalOctober 17, 2010 at 6:34 PM

    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
  41. WatchvilleNovember 6, 2010 at 1:08 PM

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

    ReplyDelete
  42. UnknownNovember 26, 2010 at 10:09 AM

    Dear sorry i can not find this



    in my blog

    ReplyDelete
  43. adminJanuary 20, 2011 at 11:37 AM

    Thanx!tremendous work done

    ReplyDelete
  44. UnknownFebruary 5, 2011 at 5:24 PM

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

    ReplyDelete
  45. streamingMarch 19, 2011 at 6:29 AM

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

    ReplyDelete
  46. HadorMarch 25, 2011 at 11:42 AM

    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. Kas PontilloApril 3, 2011 at 10:04 AM

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

    ReplyDelete
  48. AnonymousMay 22, 2011 at 1:18 AM

    where to find breadcrumb?
    its not visible anywhere on page?

    ReplyDelete
  49. AmaanMay 25, 2011 at 12:29 PM

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

    ReplyDelete
  50. Blog This LinkJune 26, 2011 at 6:39 PM

    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. Saif MobhaniJuly 22, 2011 at 11:05 PM

    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. KainLapsJuly 31, 2011 at 10:23 PM

    Its working. Thanks

    ReplyDelete
  53. NamakuevaAugust 1, 2011 at 8:20 AM

    thanks..its work..

    ReplyDelete
  54. UnknownAugust 9, 2011 at 11:49 AM

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

    ReplyDelete
  55. NamakuevaAugust 13, 2011 at 12:22 PM

    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
  56. Tech n StuffsAugust 19, 2011 at 1:49 PM

    Thank you so much for this! It works perfectly!

    ReplyDelete
  57. AnonymousAugust 31, 2011 at 10:06 PM

    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
  58. Marco PinoSeptember 19, 2011 at 4:01 PM

    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
  59. Techinical AnalysistOctober 7, 2011 at 3:30 PM

    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
  60. UnknownOctober 13, 2011 at 10:39 PM

    showing no errors but not appearing on blog??

    ReplyDelete
  61. Rabindra LamsalNovember 14, 2011 at 9:28 AM

    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
  62. Hetal Patil RawatJanuary 7, 2012 at 8:58 AM

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

    ReplyDelete
  63. UnknownJanuary 7, 2012 at 9:50 AM

    thanks

    ReplyDelete
  64. UnknownJanuary 7, 2012 at 9:51 AM

    @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
  65. vimtJanuary 8, 2012 at 2:26 PM

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

    ReplyDelete
  66. UnknownJanuary 9, 2012 at 10:47 AM

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

    ReplyDelete
  67. Syed HyderabadiJanuary 12, 2012 at 3:09 AM

    @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. AnonymousMarch 31, 2012 at 12:56 PM

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

      Delete
  68. Syed HyderabadiJanuary 13, 2012 at 8:25 PM

    @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
  69. RayJanuary 15, 2012 at 1:47 AM

    Thank you...this was very useful,

    ReplyDelete
  70. UnknownJanuary 15, 2012 at 1:39 PM

    Hai dude can i change the colours..??

    ReplyDelete
  71. BhaveshJanuary 23, 2012 at 5:22 PM

    Thanks, It worked on one of my blogspot blog.

    ReplyDelete
  72. EmbdesigntubeJanuary 23, 2012 at 5:23 PM

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

    ReplyDelete
  73. ColdFireGFXJanuary 24, 2012 at 11:52 AM

    Wow! very informative post, thank you very much

    ReplyDelete
  74. PayaboFebruary 7, 2012 at 12:46 AM

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

    ReplyDelete
  75. UnknownFebruary 7, 2012 at 4:44 PM

    this tutorial that I have been looking for thanks for sharing this one

    ReplyDelete
  76. Bojan ŽivkovićFebruary 18, 2012 at 10:17 AM

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

    ReplyDelete
  77. AdminFebruary 19, 2012 at 6:55 PM

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

    ReplyDelete
  78. ilmu unikFebruary 26, 2012 at 7:21 AM

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

    ReplyDelete
  79. UnknownMarch 7, 2012 at 1:08 AM

    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. UnknownMarch 7, 2012 at 6:44 AM

      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
  80. ColdFireGFXMarch 9, 2012 at 8:45 AM

    Very awesome tutorial. thank you!

    ReplyDelete
  81. UnknownMarch 11, 2012 at 11:04 AM

    thanks for the great tips I am gonna use this

    ReplyDelete
  82. le persone e le coseMarch 19, 2012 at 5:02 PM

    It doesn't work, anything happens.

    ReplyDelete
  83. UnknownMarch 23, 2012 at 8:53 PM

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

    ReplyDelete
  84. WallpapersmythMarch 28, 2012 at 3:13 PM

    Thanks!
    its Working NOW!

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

    ReplyDelete
  85. AnonymousMarch 31, 2012 at 12:54 PM

    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
  86. idiotic feedsApril 3, 2012 at 4:50 PM

    i got same error !!!!!!!!!!!!!

    ReplyDelete
  87. BukhariApril 23, 2012 at 11:35 AM

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

    ReplyDelete
  88. UnknownMay 3, 2012 at 1:43 PM

    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
  89. UnknownMay 23, 2012 at 3:47 AM

    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
  90. Nitin VasavaMarch 31, 2013 at 6:38 AM

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

    ReplyDelete
  91. Sweet HeartMarch 31, 2013 at 5:40 PM

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

    ReplyDelete
  92. Mr.GreenApril 4, 2013 at 10:45 PM

    I can't do it :(

    ReplyDelete
  93. thoi trang nuMay 18, 2013 at 9:43 AM

    Thanks!
    its Working NOW! :)

    ReplyDelete

Subscribe to: Post Comments ( Atom )