Blogger breadcrumbs is very useful in our blog, it’s very helpful to the users it shows where the users navigate in the blog or website, especially in ecommerce website, if your eCommerce site has lots of categories and sub categories breadcrumbs is very helpful, not only for eCommerce, breadcrumbs also useful for blog.

The benefits of adding breadcrumbs in blog, it increase your blog Pages Views, it improves your internal links for your website. Breadcrumbs is one of internal linking SEO strategy also categories, latest post, archives, related post, so definitely you add this elements.

Blogger breadcrumbs is not available in blogger admin panel at this time maybe in the future, so we need to add a piece of code in your blog template, just follow the instruction.

In this blogger tutorial for beginners series I will share how to add breadcrumbs in blogger template, it’s a very simple steps, so let’s begin…

Preview:

Step 1: Edit Html

In the blogger admin panel, go to Template -> Edit HTML

Step 2: Add Blogger Breadcrumbs

In the Edit HTML, you’ll need to paste the code in the blogger template xml, find the… (Ctrl + f)

<div class='blog-posts hfeed'>

All blogger templates have this div tag, in the xml template there have 2 this div tag or more, you should paste the code below this div tag (see screenshot)

Copy and paste this code below that div

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

Now the blogger breadcrumbs has enable in your blog, check the your blog and see the result, Thanks for reading, if you like please recommend and share.