How to Add Breadcrumbs Post Navigation In Blogger aka Blogspot

Table of Contents

What is Breadcrumb Navigation?

Breadcrumbs Navigation are defined as navigation links which used as a way to track your location on a website. In simple words we can say that, breadcrumb is type of navigation scheme which helps to track user's location on a web application or website. The idea of naming this navigation scheme as Breadcrumb was taken from the Hansel and Gretel fairy tale in which the two children drop breadcrumbs on the ground in order to track the path of their home. Breadcrumb navigation comes with an easy to use and easy to navigate interface. Generally you will see Breadcrumb navigation above the post title. But before adding breadcrumb navigation to your blogger blog, you must know the benefits of Breadcrumb navigation. 

So, now let's discuss the benefits of Breadcrumb navigation.

Benefits or advantages of Breadcrumb navigation 

Here, we will discuss the benefits that breadcrumb navigation provides to its users;

• Breadcrumb navigation provides a user friendly interface.

• Breadcrumb navigation also increase the time on a particular website. 

• Breadcrumb navigation also helps in reducing the bounce rate.

• Breadcrumb navigation also provides the feature of easy track back.

• Breadcrumb navigation also tells your location on your website.

• It also make your website more usable.

• Breadcrumb navigation also helps in increasing the page views.

Types of Breadcrumb Navigation

There are three types of Breadcrumb navigation. Now, let's briefly discuss these three types of Breadcrumb;

1. Location based

The navigation which shows the location of user in the website's hierarchy is known as Location based breadcrumbs. These breadcrumbs are generally used in navigation schemes with more than two levels.

2. Attribute based

The trail which is used to display the attributes of a particular page is known as Attribute based Breadcrumb.

3. Path based

The trail which are used to show the steps of a user to reach a particular page is known as Path based breadcrumbs. 

Now, let's discuss how To Add Breadcrumbs Post Navigation In Blogger.

How To Add Breadcrumbs Post Navigation In Blogger

Here, we will discuss step by step guide to add breadcrumbs post navigation in blogger;

1. First of all, go to blogger site and Sign-in with your Google account.

2. Now, go to Themes > Edit Html.

3. After clicking this, you will reach to theme html editor dashboard. For now, Press Ctrl+f from your keyboard and type <div class='blog-posts hfeed'> then press enter.

4. Now just paste the following code below the <div class='blog-posts hfeed'> line.

 <!--breadcrumbs start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'> &#187;
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                </b:if>
            </b:loop>
            <b:else/>
            &#187; Unlabelled
            </b:if>
            &#187; <span><data:post.title/></span>
        </b:loop>
        </span>
    </p>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='breadcrumbs'>
  <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<!--breadcrumbs end-->

5. Click Save Theme.

Conclusion

Above we have discussed basics related to Breadcrumb navigation and How To Add Breadcrumbs Post Navigation In Blogger. Breadcrumbs Navigation are defined as navigation links which used as a way to track your location on a website. In simple words we can say that, breadcrumb is type of navigation scheme which helps to track user's location on a web application or website. And by following above mentioned steps anyone can easily Add Breadcrumbs Post Navigation In Blogger. I hope this information is helpful to you all.