How to Add Breadcrumbs Navigation in Blogger

Every blogger needs to add breadcrumbs navigation in Blogger blog. Because that help to increase CTR in SERP. If there have no breadcrumbs navigation, then you will miss these and also miss many things. In the future, it will be one of Google’s ranking factor. So, you must think about it and also boost your traffic right now. Because driving lot’s traffic from the search engine one of the important points for blogging.

What is Breadcrumbs Navigation?

Breadcrumb is an easy to blog navigator for users. Using this navigation, users know that where they right now. In fact, in the Search Engine Result Page (SERP), Breadcrumbs are shown the actual path of the URL. Using this navigation, you can reduce your website bounce rate. Which great thing to increase your blog ranking and also authority.

Benefits of Breadcrumbs Navigator

If you are using Breadcrumbs in your Blogspot blog, great news for you. Because you are enjoying the following facilities and they are a really important thing for everyone’s blog:

1. Jump to your category pages in the article
2. Easy back to homepage navigator
3. Increase CTR on SERP
4. Reduce your blog bounce rate
5. Show navigator in SERP
6. Show perfect users that actually where they right now

Add Breadcrumbs Navigation in Blogger

Before adding breadcrumbs in Blogspot, you also can read to adding Breadcrumbs in WordPress. Because it’s also important for WP users. By the way, If you want to add this awesome navigation to your blogspot website, you just follow these steps:

1st Step: Go to your blog > Templates > Edit HTML > Now press Ctrl+F from your keyboard to search codes.

2nd Step: Now write ]]></b:skin> and search. After getting this, just paste following CSS before/above ]]></b:skin> tag:

.breadcrumbs{font-size: 100%; overflow: hidden;background: #fff; border: 1px solid #e2e2e2; border-bottom: 0;padding: 15px; padding-bottom: 10px;}
.breadcrumbs > span {padding:0;}
.breadcrumbs > span:last-child {color:#555;border-right:none;font-size:12px;padding:10px;font-weight:600}
.breadcrumbs span:nth-child(n+7) {display:none;}
.breadcrumbs a {font-size:12px;font-weight:600;}
.breadcrumbs span a {color:#444;padding:0 7px;font-style: italic;}
.breadcrumbs span:first-child a{color:#e8503c;font-style: initial;}
.breadcrumbs span a:hover {color:#fc3931;}
.breadcrumbs a:hover {color:#fc3931;}
.breadcrumbs .fa-angle-right{font-size:12px;}
.breadcrumbs {margin-bottom:10px;}

3rd Step: After successfully paste above these CSS codes in blogger, then you need to find this <div class=’blog-post-hfeed’> code and then paste below the following codes:

<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span> <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<div class=’breadcrumbs’><span itemscope=” itemtype=’https://data-vocabulary.org/Breadcrumb’><a expr:href=’data:blog.homepageUrl’ itemprop=’url’><span itemprop=’title’>Home</span></a></span> <i class=’fa fa-angle-right’/><b:loop values=’data:post.labels’ var=’label’><span itemscope=” itemtype=’https://data-vocabulary.org/Breadcrumb’><a expr:href=’data:label.url + &quot;?&amp;amp;max-results=6&quot;’ itemprop=’url’><span itemprop=’title’> <data:label.name/></span></a> <i class=’fa fa-angle-right’/></span><b:if cond=’data:label.isLast != &quot;true&quot;’> </b:if> </b:loop> <span/></div>
<b:else/>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span> <span>No Category</span> <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span> <span> Category for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond=’data:blog.searchQuery’>
<div class=’breadcrumbs’><span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span> <span> <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<div class=’breadcrumbs’>
<b:if cond=’data:blog.pageName == &quot;&quot;’><span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span>  <span>All Blog Posts</span>
<b:else/>
<span><a expr:href=’data:blog.homepageUrl’ rel=’nofollow’/></span> <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4th Step: Now Save Template and done your job!

After these four steps, if you are successfully completed your editing, great news for you. Because you successfully added breadcrumbs navigation in Blogspot blog. Stay with us and get more blogger tips and tricks.