How to Add Breadcrumbs in Blogger Theme?

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 navigates 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 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 the 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 to Blogger Theme. So let’s Begin:

1. Log in to your Blogger Dashboard

Navigate to the Right-hand side and click on Theme » Customise and select Edit HTML.

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

<div class=’blog-posts hfeed’>

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. Furthermore, if you face any problem while adding Breadcrumbs in Blogger templates then do comment below.