How to Add Breadcrumbs in Blogger Theme 2020

Adding Breadcrumbs in Blogger Theme is very important to Blog SEO. Breadcrumb navigation is shown what is the category of your post. The Blogger breadcrumbs are so beautiful for our Blog, It shows where the visitor navigate in your website or Blog.

especially in Blog or e-commerce Blog. If you have a lot of categories and sub-categories in your Blog it is very useful to your Blog. It shows is this post in which category.

Breadcrumb is very useful to increase your views, Ranking and much more. Breadcrumb has the highest strategy in SEO.

In Blogger you will not get Breadcrumbs setting in Dashboard default. You need to add some code in your Blogger Template to show Breadcrumbs in all Posts.

In this post, I will share information about How to Add Breadcrumbs in Blogger Theme. So let’s Begins.

#1) Log in to your Blogger Dashboard

Blogger Dashboard, Breadcrumbs

Navigate to Right-hand side click on Theme » Edit HTML.

edit Blogger Theme, Breadcrumb

Then press Ctrl + F button on the keyboard and search for the following code.

<div class='blog-posts hfeed'>

Ctrl + F

#2) Adding Breadcrumbs in Blogger

Copy the following code and paste after the given code.

<!--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'><i aria-hidden='true' class='fa fa-home'/>Home &#187;</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; labelled
            </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'><i aria-hidden='true' class='fa fa-home'/>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'><i aria-hidden='true' class='fa fa-home'/>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'><i aria-hidden='true' class='fa fa-home'/>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<!--breadcrumbs end-->

Now the Breadcrumbs are enabled in your Blog. Go to your blog click on any post and See Magic. Thanks for reading this article, if you like this post. Share with your friends on WhatsApp, Facebook, Google + to get the benefit of this post.

Read Also:

Technoenhance

Rakesh is the Owner and Author of Technoenhance. He is interested in Tech. He provides Tech News, Blogging Tips, Tutorials, WordPress, SEO & Much more.

1 thought on “How to Add Breadcrumbs in Blogger Theme 2020”

Leave a Comment