How To Add Breadcrumbs Navigation in Blogger Blog

 Breadcrumbs navigation is an awesome way to help your blog's visitors and let them easily surf pages across your blog. It is a perfect and ideal way to allow the visitor to navigate to the older page with ease. Breadcrumbs navigation shows your homepage as well as category page linked to that post so that the visitor can trackback to the desired category and check out more contents about that particular category. So today, we are going to explain the easiest way to add breadcrumbs navigation to blogger blog and also we will discuss some of its major advantages too. So let's start rolling your fingers on the tutorial. Before heading directly to the tutorial, let's know what actually are breadcrumbs navigation.

What are Breadcrumbs Navigation?

Breadcrumbs navigation are the navigation links which allows a user to keep track their location on a website. It provides a user-friendly interface so that the user can navigate back to the category attached to the landing page. Breadcrumbs navigation generally appears horizontally above the post title. Let's take a look at how breadcrumbs navigation looks like:

Why use Breadcrumbs Navigation?

While adding breadcrumbs navigation to your blogger blog, you must understand its advantages and look at how is this going to benefit you. So I am going to list some major reasons point-wise.

1. Easy to track-back: As I mentioned above, breadcrumbs navigation let's trackback to related category and to the homepage in a single click.
2. Reduces bounce-rate: No doubt! when you provide a user-friendly interface to your visitor, it will definitely reduce your blog's bounce rate.
3. Tells Location: Yes, breadcrumbs navigation tells the visitors his/her location on your website, leading to overall great usability.

How To Add Breadcrumbs Navigation in Blogger Blog?

• Go to Blogger.com Dashboard >> Theme > Backup your blog before making any changes.
• Now select Edit HTML.
• Then Search for <div class='blog-posts feed'> tag (Use Ctrl+F for quick finding) and just below it paste the following XML coding. Don’t do changes in the coding otherwise, it would not work properly. Once done, Save the Template.

Note: You may find two <div class='blog-posts feed'> tags, make sure you have to work with the first one.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='breadcrumbs-bbeginner'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<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 == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

•  Now, Search for </b:skin> tag and just above it paste the following CSS coding. 

#breadcrumbs-bbeginner {
  background: #eee;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:Verdana, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#breadcrumbs-bbeginner  li{
  float: left;
}
#breadcrumbs-bbeginner  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-bbeginner  li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
#breadcrumbs-bbeginner  a:hover{
  background: #fff;
}
#breadcrumbs-bbeginner  a::after,
#breadcrumbs-bbeginner  a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#breadcrumbs-bbeginner a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#breadcrumbs-bbeginner  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#breadcrumbs-bbeginner  a:hover::after{
  border-left-color: #fff;
}
#breadcrumbs-bbeginner  .current,
#breadcrumbs-bbeginner  .current:hover{
  font-weight: bold;
  background: none;
}
#breadcrumbs-bbeginner  .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#breadcrumbs-bbeginner .current,
#breadcrumbs-bbeginner .current:hover{
  font-weight: normal;
  background: none;
}
#breadcrumbs-bbeginner .current::after,
#breadcrumbs-bbeginner .current::before{
  content: normal;
}

All done! Congratulations! Breadcrumbs navigation has been successfully added to your blogger blog. You can customize the above CSS as per your desired looks.
Moreover, this breadcrumbs navigation won't affect your SEO score so don't hesitate while using it.

Customization (Optional):

1. To change the width of the breadcrumbs navigation bar, simply search for width:620px; and change the value to your desired one.
2. If you want to change the font-styling then search for font-family: Verdana, sans-serif; and replace it with your desired font coding.
3. You can also change the background color by changing the background: #eee; with the color code of your choice.