How To Add Breadcrumb Navigation To Blogger Blogs



Blogger LogoBreadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this ‘Home > Label > Post Title’.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

Below you can see a screenshot and the live demo.Credit for the original breadcrumbs for Blogger goes to Hoctro with further work by Blogger Plugins.

View Demo Button

Add Breadcrumbs Navigation To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box

Design Edit Html Widget Templates

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

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

Step 3. Now Replace it with this code

<b:include data=’top’ name=’status-message’/>
<b:include data=’posts’ name=’breadcrumb’/>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

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

Step 5. Now Replace It With This 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’>
<!–Breadcrumbs code info @ http://www.spiceupyourblog.com/–>

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 7. Now Replace It With This Code

/* Breadcrumbs Css info @ http://www.spiceupyourblog.com/ */
.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>

Step 8. Save your template.

That’s it breadcrumbs have been added to your blog.Credits again go to Hoctro and Blogger Plugins.Make sure to check out more of our Blogger Tutorials.

33 comments:

  1. Wow, really cool! It’s great to see resources for making a comprehensive site on Blogger. Nice share.

    ReplyDelete

  2. Hi. It’s very nice article and I realy like it. However I would like to do something a little bit different and I would realy appriciated if you can help me. (I promise a little donation for you help)

    Whole idea for Breadcrumbs Navigation is exelent, except I dislike the labels. Is there any way, that insted of the labels I show links to the static pages, because I categorize my posts that way.

    Tnx for your help.

    Marko

    ReplyDelete

  3. amazing….

    ReplyDelete

  4. Nice bro! its cool 🙂

    ReplyDelete

  5. thanks it work!

    ReplyDelete

  6. Thanks for this !!! I tried to find it.. but none of ’em worked. Thanks for this one. =]

    ReplyDelete

  7. Johnny WirjosandjojoOctober 10, 2011 at 8:46 AM

    works… thanks 🙂

    ReplyDelete

  8. i have added it bit it not works on my blog

    ReplyDelete

  9. i copyed the code and now i cant find it to remove it plzzzzzz help me

    ReplyDelete

  10. didn’t work !!

    ReplyDelete

  11. I can’t seem to do it. I followed your instructions but it still didn’t work. Help?

    ReplyDelete

  12. Thanks I searched this post from many days
    Thanks again dude
    www.odishajobs.in

    ReplyDelete

  13. Thanks Paul Crowe, you have nice site.
    I’ll bookmark

    ReplyDelete

  14. I’m not on blogger but am going to pass it on to those that are. Awesome. Thanks!

    ReplyDelete

  15. nice info

    ReplyDelete

  16. thanks SUP author for this help.

    ReplyDelete

  17. ΣΤΑΥΡΟΣ ΠΑΠΑΓΕΩΡΓΟΠΟΥΛΟΣMay 21, 2012 at 3:09 PM

    superb but how do i remove the box that sais posts under label ****** go to homepage.

    ReplyDelete

  18. sir. ihave a question when tried to get an account in adsense it says my blog is difficult site navigation. what shuld i do plees reply to me plees

    ReplyDelete

  19. That’s pretty nice work, great article. Am gonna paste this in my blog too

    ReplyDelete

  20. rituparna sonowalJuly 5, 2012 at 6:25 PM

    i m getting follwing error …. please help me…
    “The widget with id “Blog1” cannot contain element: “#comment”. A widget can only contain b:includable elements.”

    ReplyDelete

  21. Good Post .. I Try it

    ReplyDelete

  22. Great post. I added Breadcrumbs to my blog and it works. Thanks!

    ReplyDelete

  23. If We Have More Then One Labels On A Post Then Which Will Be Displayed…???

    ReplyDelete

  24. Thanks for this. I had to tick the box “Expand Widgets” before I could find the codes required, but once I done that it was plain sailing. I will read other posts and see what else I can learn… I am relatively new at this game.

    ReplyDelete

  25. Thanks for share ^-^ It’s very nice

    ReplyDelete

  26. Thanks man.. its help me ! 🙂

    ReplyDelete

  27. This is very awesome tips for make navigation better in my blog

    ReplyDelete

  28. Thanks it works, all the other blogs method i tried didn’t work. Great work

    ReplyDelete

  29. This is great! It works on my blog. Now my site looks neat and professional. Thank you so much!

    ReplyDelete

  30. Awesome Article.
    I will use breadcrumb in my blog.
    So thanks for helping.

    ReplyDelete

  31. Bro i encounter this error please help. The widget with id “Blog1” cannot contain element: “#comment”. A widget can only contain b:includable elements

    ReplyDelete

  32. very interesting
    thanks for this info. 🙂

    ReplyDelete