How To Add Breadcrumbs Post Navigation In Blogger Step By Step

Breadcrumb navigation greatly enhances the way users find their way around your blog site or website. In terms of usability, breadcrumbs reduce the number of actions a website visitor needs to take in order to get to a higher-level page, and they improve the findability of website sections and pages. They are also an effective visual aid that indicates the location of the user within the website’s hierarchy, making it a great source of contextual information for landing pages.

Breadcrumbs navigation is an awesome way to help your blog's visitors and let them easily surf pages across your blog. It is a perfect and ideal way to allow the visitor to navigate to the older page with ease. Breadcrumbs navigation shows your homepage as well as category page linked to that post so that the visitor can trackback to the desired category and check out more content about that particular category. 

So in this blogger tutorial, we are going to explain the easiest way to add breadcrumbs navigation to blogger blog and also we will discuss some of its major advantages too. Breadcrumb appears on the top of the post title in a horizontal style list with symbol >> or other as separate, to tell visitors for which label or category article belongs. It provides the flow of post and gives a backlink to the tag it belongs


Other Tutorials:

How To Add A Contact Form - Contact Page In Blogger Step By Step - New!

How To Add Custom Robots.txt File In Blogger Step By Step - New!

How To Add Twitter Cards To Blogger And Wordpress Step By Step - New!

How To Create A Blog On Blogger.com (Blogspot) Step By Step - New!

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps - New!

The History Of Breadcrumbs

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location on a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

What is Breadcrumbs Navigation In Blog sites or Websites?

Breadcrumbs navigation are the navigation links which allows a user to keep track of their location on a website. It provides a user-friendly interface so that the user can navigate back to the category attached to the landing page. Breadcrumbs navigation generally appears horizontally above the post title.

While adding breadcrumbs navigation to your blogger blog, you must understand its advantages and look at how it's going to benefit you. 

Benefits Of Using Breadcrumbs In Blog sites or Websites

1. Easy to track-back: breadcrumbs navigation let's trackback to related category and to the homepage in a single click.
2. Reduces bounce-rate: when you provide a user-friendly interface to your visitor, it will definitely reduce your blog's bounce rate.
3. Tells Location: breadcrumbs navigation tells the visitors his/her location on your website, leading to overall great usability.
4. Increase time on a website
5. Make the website more usable
6. Increase more page views
7. User-friendly interface

The Types Of Breadcrumbs In Blogsites Or Websites

There Are 3 Types Of Breadcrumbs:

1. Location-based Location-based breadcrumbs show the user where they are in the website’s hierarchy. They are typically used for navigation schemes that have multiple levels (usually more than two levels).

2. Attribute-based Attribute-based breadcrumb trails display the attributes of a particular page.

3. Path-based Path-based breadcrumb trails show users the steps they’ve taken to arrive at a particular page. Path-based breadcrumbs are dynamic in that they display the pages the user has visited before arriving on the current page.

Let's go to the main tutorial now, how to add breadcrumbs post navigation in blogger. As at the time this post is been written there are breadcrumbs in the Admin. panel of blogger or widget to add to your blog, perhaps in the near future, we see some changes. But now we need to do it on ourselves so let's get started on how to add breadcrumbs post navigation in blogger.

Step 1: On the blogger dashboard, go Theme>>Edit HTML

Step 2: You will be provided with the whole code of your blog in a large field, Search for the below code and place the code given just after it.

<div class='blog-posts hfeed'>

If you don't know how to do it don't worry I am taking you through this tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right part of the template codes. Copy and paste this code <div class='blog-posts hfeed'> (code given above) inside the search box and press enter on your keyboard. Copy and paste the following code just after it.



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

See the infographic for more information

That’s it! Don’t forget to leave a comment or share this article if you found it useful. Check your blog and see the breadcrumbs!
full-width