Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.The original breadcrumbs idea is given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.

Add Breadcrumbs Navigation To Blogger

  1. Go to Blogger Dashboard > Template
  2. As always download a copy of your template
  3. Click on Edit HTML
  4. Hit Proceed
  5. Now find below code,

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

just above it copy and paste below code,

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

Now find below code (if you find two occurrences of this, then locate the second one)

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

just above it paste below code,

<!-- Breadcrumb Navigation By http://www.helperblogger.com/ -->
<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>
<!-- Breadcrumb Navigation By http://www.helperblogger.com/ -->

* 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 the code in line number 16 and 18.

Now find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Now save your changes and you are done.

Post a Comment

  1. Oh Nice .... This Post Usefull For Every Blogger and Improve SEO Add Breadcrumbs

    Thanks Rahul

    Google plus Style Blogger Template

    ReplyDelete
    Replies
    1. good.Thanks....but I saw best widgets in this blog http://www.lapcool.info/2013/11/how-to-add-blogger-official-contact-form.html

      Delete
  2. Bro When I Add That Above codes in my blogger blog template then Bellow This message Was Pop uP And Template Was Not Saved...???


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


    So Brother What Is The Reason Please Reply Me Thanks

    ReplyDelete
    Replies
    1. I think you are placing the codes at wrong places thats why you are getting this error.You have add all code just above of the codes which you have found.

      Delete
  3. This is really cool :D
    I tried it on my blog and its AWESOME ! !! !

    www.yourpcgenie.com

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Yes, Rahul Brother You Are Right But Now i Placed Codes On COrrect Places But One Problem Is Popup Which Is My Post Was Not Displayed on My Blog...???????

    So Now I Don't No Whats Happen...???!!!???

    Please Help Me Again Bro thanks...

    ReplyDelete
    Replies
    1. Bro. I can't understand what are you asking.Will you please explain it again?

      Delete
    2. Brother Listen I Placed All Codes COrrectly On My Blogger Blog Ok

      Now I Saved My Blogger Template.
      Now I View My Blog !!! One Problem was Showed which is my blogger blog post was not displayed in my blog...So Thats The Problem...???

      I hope You Understand My Bad English...

      Delete
    3. Dear Brother Rahul Can I Send You My Blogger Blog Template @ rahul@helperblogger.com To You, You Placed Code Correctly And Send Me Again My Template Bro Reply Me I Am Waiting Thanks...

      Delete
  6. Nice Post Visit Our Blog http://www.rockpaki.com/

    ReplyDelete
  7. Bro When I Add That Above codes in my blogger blog template then Bellow This message Was Pop uP And Template Was Not Saved...???


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


    So Brother What Is The Reason Please Reply Me Thanks

    ReplyDelete
    Replies
    1. You have copied above comment as it is so that my replay is also as it is :)

      Delete
  8. it is realy cool check my site www.freefullversionsoftwares4u.blogspot.com

    ReplyDelete
  9. Hey brother Rahul Ippar, this post is really nice. You’re all the tips are helpful thanks for sharing…

    Visit my blog site: mybloggertopic

    ReplyDelete
  10. We are focusing on what they can do for you as targeted woman.cheap stun guns Women are more at risk. Statistics show that most violence is done by men, and most have a preference of a female target. Because, most but not all females are the physically weaker sex, stun gun flashlightsand these men that are hoping to do violence, commonly want a weaker adversary. Someone they can control and dominate. With a non-lethal weapon you can reduce the risk that you will be viciously beaten or killed when walking to your car at night, K95 stun gunor taking an evening walk in your once safe neighborhood.

    ReplyDelete
  11. hi

    i get error

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

    www.banglamovies.co.uk

    ReplyDelete
  12. Nice Post , bro . But I would have liked about 2-3 versions of this breadcrumbs navigation .

    Regards,
    Navneet
    www.techravers.com

    ReplyDelete
  13. what Sylvia answered I'm shocked that anybody can make $6088 in 4 weeks on the computer. did you see this site link http://Run19.com

    ReplyDelete
  14. my buddy's half-sister makes $62 every hour on the laptop. She has been without work for seven months but last month her payment was $20367 just working on the laptop for a few hours. Read more on this web site http://www.taz3.com

    ReplyDelete
  15. Wow! Great sharing again.ou’re all the tips are helpful thanks for sharing…

    Anime Bounds | Anime

    ReplyDelete
  16. I put this code on Best Movie Torrents Blog.

    Error :

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

    Please help

    ReplyDelete
  17. Dear, I am very like your website and all post. it is great and usefull for us. i will often come here,and support any post which your push. Tks.welcome to our website :http://www.lingerieocean.com.WHOleSAle sexy lingerie UK

    ReplyDelete
  18. This is really cool. But, based on MBT, Breadcrumbs is not good in SEO. You better use Label.

    Thank you for sharing More Blog Tools to us.

    ReplyDelete
  19. Thanks alot it is very useful for me keep sharing the information Thanks..
    web designer in uk

    ReplyDelete
  20. hi...i can't install the breadcrumbs plugin due to codes on my blog...can u help me to solve it..thanks

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. The widget with id "Blog1" cannot contain element: "#comment". A widget can only contain b:includable elements. Showing...Solution?

    ReplyDelete
  23. Wonderful Post
    Minimal SEO Premium Bloger template Download

    Plz visit this site and click on ads to support ..please..Though i know i shouldn't be doing this

    ReplyDelete
  24. Wonderful Post
    Minimal SEO Premium Bloger template Download

    Plz visit this site and click on ads to support ..please..Though i know i shouldn't be doing this

    ReplyDelete
  25. This comment has been removed by a blog administrator.

    ReplyDelete
  26. This comment has been removed by a blog administrator.

    ReplyDelete
  27. This post is very much worthy in providing a clear cut and detailed idea about the breadcrumbs navigation widget for blogger with it's codes are effective as well as knowledge oriented.[url=http://pepdeal.com/]website templates[/url]

    ReplyDelete
  28. excellent piece of information, I had come to know about your website from my friend kishore, pune,i have read atleast 8 posts of yours by now, and let me tell you, your site gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanx a lot once again, RegardsEamcet 2013 Online Application

    ReplyDelete
  29. http://www.Onlocker.com

    nice post and nice blog

    ReplyDelete
  30. Http://www.Saeedbaba.com

    Great tutorial bro. How to See Who's Unfriended You on Facebook

    ReplyDelete

  31. interesting piece of information, I had come to know about your web-page from my friend pramod, jaipur,i have read atleast eight posts of yours by now, and let me tell you, your blog gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss all Indian govt jobs

    ReplyDelete
  32. Download stylish blogger and wordpress templates
    Visit: www.templatecrunch.com

    ReplyDelete
  33. Cool tip..

    also visit my blog..

    http://unlimitedsoftz.blogspot.in/

    ReplyDelete
  34. Hey, How are going on?

    This is an effective top-web,where we can get real able information of www.helperblogger.com.There is no man but like this website because it's elements is very nice so Any body can get important information of www.helperblogger.com.I also want to show about on We realize that when you're looking for immediate offers while purchasing on the internet in Modern Australia you're worried about the protection of your dealings. At Kids rug, your personal and bank greeting card information are absolutely protected and secure behind our SSL technological innovation. We'll never complete your information on to anyone else, we guarantee. You are also welcome to use our Client Service Number 1300 625 582 and place your order over the phone.

    Thanks for this.

    ReplyDelete
  35. Great Post..Thanx For Sharing it ....Keep Up the Good Work...

    ReplyDelete
  36. nice your site thanks for sharing love you all team good work keep it up
    Wallpapers

    ReplyDelete
  37. Welcome to SEO VOLT - the top SEO company in Connecticut. We specialize in white hat, ethical seo services for Connecticut small businesses that nets a positive impact on your website and improves your search engine ranking.
    white hat SEO services

    ReplyDelete
  38. Grate , About white hat seo real seo,in this we use search engine guide lines to optimize a site.
    Nice blog for learn.

    What is white hat SEO

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
  40. Your complete blog is nice for gaining knowledge about competition of websites.Thanks for sharing.

    :http://www.infoproductkillerreview.com/

    ReplyDelete
  41. I think there is wrong code that it is not be used in our friend template.

    ReplyDelete
  42. Each SEO method will differ in the results it brings you and depending on how much effort you put into the technique, but they are all proven white hat methods which do work if done correctly.
    what is white hat seo

    ReplyDelete
  43. One is that visitors will see your article, read it and then if they like it click through to your website through the backlink.
    white hat seo

    ReplyDelete
  44. Can anyone plz tell me that how the popular post, tags and blog archive can be arranged in this way like in this blog at the top plz tell me anyone.

    ReplyDelete
  45. Nice interesting widget.This is one of the decorating widget to be used in blogger zone needed to enhance the style of any blog.I appreciate your tutorial.hope you will provide more

    ReplyDelete
  46. your site is very 'contentful'. I have learnt alot here. Thanks for this tutorial. Few days back i search same thing on google but unfortunately nothing found. This really help me alot.

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. This comment has been removed by the author.

    ReplyDelete
  49. Your article cleared the doubts I had before in this field..... I was in search of information related with your post… Now the doubts were cleared .. So thumps Up!!! Make Money , Blogging Tips

    ReplyDelete
  50. Thanks Helperblogger I have used this on my blog www.guruofmovie.blogspot.in

    and found this is a very useful for all blogger.

    ReplyDelete
  51. This comment has been removed by a blog administrator.

    ReplyDelete
  52. I have used this on my blog . Thanks a lot.
    Tiny Serval

    ReplyDelete
  53. The hottest sexy Halloween costumes for 2014 from WholesaleLingerieX.com. we ship from our warehouse.Wholesale Sexy Costumes, Low Price Sexy Halloween Costumes From China Top Suppliers.
    wholesale women sexy halloween costumes
    Wholesale sexy halloween costumes cheap
    wholesale sexy halloween costumes
    wholesale sexy halloween costume
    wholesale sexy adult costumes

    ReplyDelete
  54. how to set up my site www.jobsgola.com

    ReplyDelete
  55. The best way to cheer yourself up is to try to cheer somebody else up. See the link below for more info.


    #cheer
    www.ufgop.org


    ReplyDelete
  56. Www.facebook.com/hindimeshiksha

    ReplyDelete
  57. Thanks now my looks cool , I think it is very helpful for new a blogger who looking for Breadcrumbs Navigation. Thanks / blogger supporter

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top