How To Add Breadcrumbs Post Navigation In Blogger Step By Step

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:


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

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.

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

Post a Comment

17 Comments

  1. Hi! Thanks for the information. Another question, how can I add some CSS to the basic Breadcrub you give us? Thanks.

    ReplyDelete
    Replies
    1. Hi! Claudio Troisemme, you use this CSS to style the breadcrumb
      .breadcrumbs {
      padding:5px 5px 5px 0px;
      margin: 0px 0px 15px 0px;
      font-size:90%;
      line-height: 1.4em;
      border-bottom:3px double #e6e4e3;
      font-weight:bold;
      }

      Delete
  2. Hey, i tried this.. but i m unable to find the required in my theme html . There's feed view ' blog-posts' inline ad
    Item view blog-posts inline ad.
    But not which is required.

    ReplyDelete
  3. Thank you https://www.znews365.com
    Pls visit and analysis me website

    ReplyDelete
  4. Great post.
    Simple methods.
    For years I have been working on my breadcrumbs but it seems like some templates doesn't support it ..
    I have tried many tutorials but Bravo Tech Arena is a different thing altogether.
    Not one has worked for me yet

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Çiğli Viessmann Servisi Olarak blogunuzu beğenerek takip ediyoruz : Başarılar Diliyorum

    ReplyDelete
    Replies
    1. Wow.... i really like this blog post. It is very helpful to us blogger blogspot users. I really appreciate your effort. This website also has a whole section dedicated to blogger blogspot users (https://jumiaafrica.blogspot.com/search/label/Blogger%20Blog%20Tutorials?&max-results=12). Thank you very much.

      I saw the ads on your website an was wondering how you did it to make them this many. I will check the above link to see if there is any tutorials on that. Thank you very much once again. Here is my site (https://firetopbest.blogspot.com/). I would love for you to check it out. It is also hosted on blogspot. Thank you!!!!!!!

      Delete
    2. This comment has been removed by the author.

      Delete
  7. Hi, your content is awesome and i was able to use it to boost my search engine rankings and the results were amazing. I also used it for some customers who gave me seo copywriter jobs and they were very satisfied.

    ReplyDelete
  8. When you go to the website of the Sattaking Agency, you will see that many numbers (00-99) will be written, all you have to do is choose a lucky number and invest as much money as you can according to your budget. Satta king

    ReplyDelete
  9. Install and activate Yoast SEO.
    Copy the breadcrumb embed code snippet.
    Click update file.
    8024a000 windows update error

    ReplyDelete
  10. Thanks for sharing. Can you create a blog on how to create homepage, About, Sitemap, Privacy Policy, & Disclaimer? Thanks.

    ReplyDelete
  11. This article is so good to read and I also find it very interesting and very useful to everybody.

    Enjoy Your Night with VIP Independent Chandigarh Model

    https://www.dreamnightcallgirls.com/
    Buy You Tube 4000 Watch Hours

    ReplyDelete
  12. Awesome easy to follow guide. Thanks for maintaining free resources for bloggers .https://wshsingapore.blogspot.com/ & https://workplace-safety-health-audit.blogspot.com/

    ReplyDelete