How To Create Breadcrumbs Navigation in Blogger Blogs

Breadcrumbs Navigation is always deliberated as a core element of a blog. Some people may take it as a useless or unnecessary thing while other, thinks that it is an ideal way of allowing your users to navigate the older pages with ease. It is a fact, that Breadcrumbs increases the usability of a blog. Breadcrumbs provide an alternative method to the visitors so they can easily navigate similar articles without going through lots of different pages.

Today in this article, we will integrate Breadcrumb navigation widget in Blogger Blog and would also learn about it advantages that Why a Person should use Breadcrumb navigation menu in Blogger enabled websites.

Breadcrumbs Navigation (DEMO)

What are Breadcrumbs?

Breadcrumb is a name of navigation links, which are used to provide user-friendly experience to the visitors. Fundamentally, it allows users to keep track of their location within a website. They usually appear horizontally at the top of a website or a webpage. They show links of the previous page that the user navigated through in order to reach into the current page. The breadcrumbs provide a path to users so they can easily navigate to the old pages. A greater-than sign (<) is often used which works as a heritage separator. Typically, breadcrumbs usually look like this.

Advantages of Using Breadcrumbs:

To convince someone to start using Breadcrumbs it’s essential to show him the advantages of it. Consider the following meaningful advantages of using Breadcrumbs.

Reduces Bounce Rate:Typically, by adding breadcrumbs it will provide a comprehensive navigation menu to your visitors, it will help users navigate back-to-back pages. Eventually, it will help in reducing the bounce rate of a website, and would engage users for a longer period of time.

Builds Strong Interest: Whenever, a visitor lands on a website he has no information about its interface. In the ODDs, he can always use Breadcrumbs navigation to navigate through different pages according to their interests. It would surely build strong interest among the user.

Easy to Back Track: The primary navigations are not designed to back track the parent navigation. However, Breadcrumbs are flexible enough to track back the parent directories that help users to navigate according to their interests.

Improves Usability: Breadcrumbs provide additional linking that help users to navigate. For example, a user land on your site or an internal page of your site. In this situation, breadcrumbs would help him to understand where he had landed within the site's hierarchy.

How To Add Breadcrumbs Navigation in Blogger Blog?

Go to Blogger.com >> Template.
Backup the theme in case anything went wrong.
Now Select Edit HTML >> Proceed.
Tick the Expand the Widget Box.

Then Within the Template search for Skin and above it paste the Following CSS Coding. Remember: everyone has the authority to do any modification if is necessary otherwise this CSS is designed to take shape of any kind of blog or website.

#breadcrumbs-mbl {
background: #eee;
width:620px;
margin-left:20px;
border-width: 1px;
font-family:'Oswald', Arial, Helvetica, 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-mbl li{
float: left;
}
#breadcrumbs-mbl 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-mbl li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-mbl a:hover{
background: #fff;
}
#breadcrumbs-mbl a::after,
#breadcrumbs-mbl 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-mbl a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs-mbl a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs-mbl a:hover::after{
border-left-color: #fff;
}
#breadcrumbs-mbl .current,
#breadcrumbs-mbl .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-mbl .current::after,
#breadcrumbs-mbl .current::before{
content: normal;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-mbl .current,
#breadcrumbs-mbl .current:hover{
font-weight: normal;
background: none;
}
#breadcrumbs-mbl .current::after,
#breadcrumbs-mbl .current::before{
content: normal;
}

Now once again, Search for <div class='blog-posts hfeed'> 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.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<ul id='breadcrumbs-mbl'>
<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 == "true"'>
<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>

All Done: Congratulations the breadcrumb Navigation is successfully integrated in your website. Since, Technique is modest. Therefore, it would not affect your SEO score. Feel Free to leave your comment below for further discussions.

From The Editor's Desk:

We hope you guys have enjoyed today's tutorial. We will also implement Breadcrumb navigation on this site once we would find an appropriate position. What are your thoughts about it? take care of yourself till then, Peace, Blessings and Happy blogging.