August 14, 2018

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.
How to Add Breadcrumbs Navigation in Blogger

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.
What is Breadcrumbs Navigation

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:
  1. Jump to your category pages in 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 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: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=''><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=''><a expr:href='data:label.url + &quot;?&amp;amp;max-results=6&quot;' itemprop='url'><span itemprop='title'> <></span></a> <i class='fa fa-angle-right'/></span><b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> </b:loop> <span/></div>
<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 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>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span> <data:blog.pageName/></span>
<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>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'/></span> <span><data:blog.pageName/></span>
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.
Previous Post
Next Post

Masum one of the young and professional blogger since 2015. He is a student too and currently lives in London, United Kingdom. He love to writing about blogging tips and tricks for beginners. Stay with him and learn advanced level Blogging and Search Engine Optimization.


  1. class='blog-post-hfeed'> i cant find this on my blog
    please help

    1. May be you’re using custom theme. It works only blogger default templates. But we update soon for custom templates.