How To Add Breadcrumb Navigation To Blogger Blogs




| 33 comments

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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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. Thanks for this !!! I tried to find it.. but none of 'em worked. Thanks for this one. =]

    ReplyDelete
  4. i have added it bit it not works on my blog

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

    ReplyDelete
  6. I can't seem to do it. I followed your instructions but it still didn't work. Help?

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

    ReplyDelete
  8. Thanks Paul Crowe, you have nice site.
    I'll bookmark

    ReplyDelete
  9. I'm not on blogger but am going to pass it on to those that are. Awesome. Thanks!

    ReplyDelete
  10. thanks SUP author for this help.

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

    ReplyDelete
  12. 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
  13. That's pretty nice work, great article. Am gonna paste this in my blog too

    ReplyDelete
  14. 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
  15. Great post. I added Breadcrumbs to my blog and it works. Thanks!

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

    ReplyDelete
  17. 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
  18. Thanks for share ^-^ It's very nice

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

    ReplyDelete
  20. Thanks it works, all the other blogs method i tried didn't work. Great work

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

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

    ReplyDelete
  23. 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
  24. very interesting
    thanks for this info. :)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us