How to Add Breadcrumbs Navigation in Blogger

Every blogger need 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 future, it will be one of the Google’s ranking factor. So, you must think for it and also boost your traffic right now. Because driving lot’s traffic from search engine one of the important point for blogging.

What is Breadcrumbs Navigation?

Breadcrumb is easy blog navigator for users. Using this navigation, users know that where they right now. In fact, in the Search Engine Result Page (SERP), Breadcrumbs shown 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 following facilities and they are really important thing for everyone’s blog:

Jump to your category pages in article

Easy back to homepage navigator

Increase CTR on SERP

Reduce your blog bounce rate

Show navigator in SERP

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 bellow 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.