Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

How to Add Breadcrumb for blogger blog

All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don’t know what a breadcrumb is,here is a little defenition from wikipedia.

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.

So Now lets get Started :

  1. Login to your blogger dashboard
  2. Go to Layouts and then Edit HTML
  3. Then I would Sugguest you download the whole template first then Continue Editing.
  4. Then Tick the Expand widget Template.
  5. Now find for this Code :
    <b:include data='top' name='status-message'/>

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

  6. Now Replace it with the below code :

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

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

  7. Now Find :
    <b:includable id='main' var='top'>

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

  8. Now Replace the above code with below 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'>

    <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'>

  9. Now Find ]]></b:skin> and replace it with the below code :
    .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>

    .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>

Now you should have a working breadcrumb navigation on your system.

Subscribe via Email

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to print (Opens in new window) Print
  • Click to share on WhatsApp (Opens in new window) WhatsApp
  • Click to email a link to a friend (Opens in new window) Email

Related

July 12, 2010 Ritesh Sanap Blogger Tutorials Blog Beginner Series, Blog Design Series, Blogger Hacks, fairytale, hansel and gretel, navigation aid, term comes from, Widget

Comments

  1. abeecdick's virtual room says

    July 15, 2010 at 7:03 pm

    nice tips.
    alike this tips,
    i want to try at my blog.
    thanks

    Reply
  2. Ritesh Sanap says

    July 15, 2010 at 7:05 pm

    @abeecdick's virtual room
    You are most welcome if you like our service then do subscribe to it.

    Reply
  3. klerat says

    August 25, 2010 at 8:52 am

    thanks Im subscribe this

    Reply
  4. Hador says

    March 22, 2011 at 12:44 am

    I tried this on my blog, and it worked fine.

    However, I was a little disapointed at seeing that only one label was displayed. Of course the blog engine has no way of knowing which ordering I want for my labels, but perhaps there is a way of telling it in the template?

    One solution could be something like:
    SharePoint is priority one, C# is priority two, Custom fields is priority three etc..

    Then a post with labels SharePoint and Custom fields would have the breadcrumb
    Home>SharePoint>Custom fields>[post title]

    How would such a template code look?

    Reply
  5. Toufeeq says

    August 15, 2011 at 9:23 pm

    That was a nice trick. Also I have heard breadcrumb helps SEO! So, thank you for not only providing the trick of adding breadcrumb but also for optimizing my blog a bit. :)

    Reply
    • Ritesh Sanap says

      August 18, 2011 at 5:51 pm

      Toufeeq,
      Thank you for appreciating my work.

      Reply
  6. Epd says

    October 16, 2011 at 5:46 pm

    Thanks a lot.

    Reply
  7. geek world news says

    November 21, 2011 at 10:04 pm

    First thanks for your best tutorials.
    but please also add demos when you post new tutorials.
    Because some time reader are not identify that which tutorials you posted when thanks best of luck.
    Nice blog.

    Reply
    • Ritesh Sanap says

      December 1, 2011 at 4:09 pm

      Thank you for suggestion geek world news i will be looking forward to it.

      Reply
  8. ahmad najiullah says

    January 5, 2012 at 10:31 pm

    Any Demo for this script????

    Reply
    • Ritesh Sanap says

      January 19, 2012 at 8:18 pm

      Sorry No Demo :(

      Reply
  9. Rajeeb says

    March 23, 2012 at 8:50 pm

    Its not working for me please help

    Reply
    • Ritesh Sanap says

      April 2, 2012 at 10:54 am

      Rajeeb, i visited your site and the breadcrumbs are successfully working

      Reply
  10. The Sun and the Turtle says

    April 22, 2016 at 6:21 pm

    Cool! Very handy and easy implementation. Nice to find solutions that do not require javascript.

    Reply
  11. Ritesh Sanap says

    November 12, 2016 at 8:10 am

    to create blogspot theme you should know XML/ HTML and CSS whereas for WordPress themes PHP/HTML and CSS, even if you don’t know XML and PHP you can still tweak around the themes for blogspot and wordpress as it mostly is in HTML

    Reply

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Mozilla Firefox 4 beta 1
Next Next post: MadBlogger – Blogger Template

Currently Trending

  • How to download Specific parts of YouTube videos
    How to download Specific parts of YouTube videos
  • Windows Vista CD key
    Windows Vista CD key
  • How to retrieve my Demonoid username
    How to retrieve my Demonoid username
  • How to add Logo to Thesis theme
    How to add Logo to Thesis theme
  • How to Delete Feedbacks from JetPack Contact Form
    How to Delete Feedbacks from JetPack Contact Form
  • List Of All 255 Keyboard All Alt Key Codes
    List Of All 255 Keyboard All Alt Key Codes
  • h4x0r ( Hacker ) - Blogger Template
    h4x0r ( Hacker ) - Blogger Template

Get Latest post in your Inbox

Random Posts

Format Hardisk Using Notepad

January 16, 2008 By Ritesh Sanap Leave a Comment

How to add Author Box below post in thesis

April 16, 2011 By Ritesh Sanap 6 Comments

How to check if Antivirus is working properly or not

June 1, 2010 By Ritesh Sanap 1 Comment

Using Search Filters in Orkut – Quickly Find your Stuff

July 14, 2008 By Ritesh Sanap Leave a Comment

How to disable Rotator in thesis

March 29, 2011 By Ritesh Sanap 4 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2025 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean