How To add Breadcrumb Navigation to Blogger/Blogspot

With a “breadcrumb-navigation”, readers of your blog can easily know the position of an article that’s being read and also can search the articles in the same category.

If you have been reading lately, you might have seen a simple row of navigation above the title of an article that you’re reading, like the screenshot below:

The navigation like above is known better by the name of “breadcrumb-navigation”.

With a few modifications to your blogger template code, you can add the  “breadcrumb-navigation” to your blogger blog. Just follow the steps below:

  1. Please log in to blogger with your ID
  2. Click Design
  3. Click Edit HTML tab
  4. Click Download Full Template and please back up your template first
  5. Please check the small box beside Expand Widget Template
  6. Find the code ]]></b:skin>
  7. Copy and paste the code below exactly above the code ]]></b:skin>

    /* Breadcrumb from
    ———————————————– */
    .breadcrumbs {
          padding:5px 5px 5px 0px;
            margin: 0px 0px 15px 0px;
            line-height: 1.4em;
          border-bottom:3px double #e6e4e3;

  8. Find the following code in your template :
    <div class=’post hentry uncustomized-post-template’>  or <div class=’post hentry’>

  9. Copy and paste the code below exactly below the code <div class=’post hentry uncustomized-post-template’> or <div class=’post hentry’>

    <b:if cond=’data:blog.homepageUrl == data:blog.url’>
            <b:if cond=’data:blog.pageType == &quot;item&quot;’>
                <div class=’breadcrumbs’>

                 Browse &#187;  <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 == &quot;true&quot;’> &#187;
                        <a expr:href=’data:label.url’ rel=’tag’><></a>
          &#187; <span><data:post.title/></span>
          <b:if cond=’data:blog.pageType == &quot;archive&quot;’>
          <div class=’breadcrumbs’>
          Browse &#187; <a expr:href=’data:blog.homepageUrl’>Home</a> &#187; Archives for <data:blog.pageName/>
            <b:if cond=’data:navMessage’>
          <div class=’breadcrumbs’>

  10. Click Save Template button
  11. Wait for a while until your template saved
  12. Open your blog, click the title of an article, see the result
  13. Finished. 

If your steps are correct, view one of your blog posts, the “breadcrumb-navigation” will be like this:

Note: you must be categorizing your posts with “Labels” for this to really work.

I hope it works for you.

Feel free to check other Blogger tricks and tips.

If you are in need of more help or have anything to say, just use the comment from below this post, at


Please Share :

See also :   How To Write Blog Posts Using Nokia Phones OviMail App

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here.


Leave a Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

  • Do You Want To Work At Dubai ?Click Here
  • You Can Make Money Promoting Other People's ProductsRead More
  • Interested in starting data plans reselling business?Click Here
  • Want To Join A Forum Where You Can Discuss Blogging?Click Here
  • NetDivo ePin Manager Lets You Print Airtime Of All NetworksLearn More

List of Globacom Outlets In Nigeria, Buy Glo Modem for N5000

How To Insert “LOVE SYMBOL” In Facebook Status Updates