How to Add Breadcrumb Navigation to Blogger/Blogspot Blog

It is not difficult to add a breadcrumb to your blog but it does involve adding a snippet of code to your template. Below is a step by step walk through which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions.

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

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, if you are not already logged in

2.     Navigate to Template > > Edit HTML

3.     Click Edit HTML tab

4   4.     Click Download Full Template and please back up your template first

5.     Back up your blog using Download Full Template as a precaution in case you  accidentally overwrite some code and are not able to retrieve it.

6.      Use CTRL F to find this code ]]></b:skin>

7.      Copy and paste the code below exactly above the code ]]></b:skin>

/* Breadcrumb from www.entertainmentinfotech.com

----------------------------------------------- */

.breadcrumbs {

      padding:5px 5px 5px 0px;

        margin: 0px 0px 15px 0px;

      font-size:100%;

        line-height: 1.4em;

      border-bottom:3px double #e6e4e3;

      } 

8.     Again, use CTRL F to find any of the following code in your template:

<div class='blog-posts hfeed'>  

                   OR 

<div class='post hentry uncustomized-post-template'>

                  OR 

<div class='post hentry'>

9. Now Copy and paste the code below exactly below any of the codes above in step 8

<b:if cond='data:blog.homepageUrl == data:blog.url'>
      <b:else/>
        <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'><data:label.name/></a>
                  </b:if>
          </b:loop>
      &#187; <span><data:post.title/></span>
           </b:if>
        </b:loop>
            </div>
        </b:if>
      <b:else/>
      <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/>
      </div>
      </b:if>
      <b:else/>
        <b:if cond='data:navMessage'>
      <div class='breadcrumbs'>
      <data:navMessage/>
      </div>
      </b:if>
      </b:if>

10. Click on Save Template button

11. Click View Blog and navigate to any post page to see your new breadcrumb in action

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.

In this Blogger tutorial you have learned how to add breadcrumb navigation to your Blogger blog (Blogspot blog) to improve SEO and site navigation. 

I hope you successfully added Breadcrumbs in your blogger blog. If you feel any difficulty or you have for any suggestions please use comment box. Please let me know how you get on. Good luck!

Credit to Ogbongeblog

Did you find this post useful? Or did you have any question or suggestion concerning this post or any post you see here??  Please feel free to make use of the comment box below, please no abusive words.

Well, i hope you like this post, please you can use the comment box to express yourself and also share to your friends so they can also gain from this knowledge.

I hope you like this post.

Kindly use the share buttons, Like and send button to share and send this post to your friend. They will surely appreciate it.