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.

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 >> 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;
  border-width: 1px;
  font-family:'Oswald', Arial, Helvetica, sans-serif;
  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;
  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'>
<!-- No breadcrumb on home page -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<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 == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><></a></li>
</b:if><li><a class='current'><data:post.title/></a></li>

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.

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
Choose Wisely!


Editorial Team MOD
December 22, 2012 at 12:20 AM

Can you provide us the Details that what problem you're facing because its working fine at our end. Peace

Editorial Team MOD
December 22, 2012 at 12:22 AM

@Every One,

Hey All Thanks for leaving your Reviews. Well Actually, This widget has nothing to do With SEO. Since, these Breadcrumbs would not going to appear on Search engine. It is created with Basic HTML to provide user-friendly experience to the visitors.

If anyone is thinking that it would replace his Permalinks with Breadcrumbs in Search Engine Results then they haven't read the article correctly. Hope that Helps. Peace

December 22, 2012 at 12:52 AM

Nice... Thx...

Editorial Team MOD
December 22, 2012 at 1:30 AM

It Should work on your site because you're using Freshable theme. We have tested on it.

Sure we will write a tut on it. Peace

Editorial Team MOD
December 22, 2012 at 1:39 AM

Oh, That's Quite impossible. Show me your site URL.

December 22, 2012 at 4:00 AM

Pls help me. i want to put this metro style navigation menu in center position but it alway align to left.

Editorial Team MOD
December 22, 2012 at 8:59 AM

If you can provide your Site URL then we can help.

Editorial Team MOD
December 26, 2012 at 11:53 PM

Its working properly for everyone. However, we will publish a new tut for your satisfaction.

Editorial Team MOD
December 28, 2012 at 7:04 AM

Yes Of course!

Editorial Team MOD
December 30, 2012 at 6:38 AM

Your site is full of Widget. Reduce them it should work! as it is working on our Freshable theme

Editorial Team MOD
January 3, 2013 at 11:23 PM

Yes, We will solve your problem. Sooner

February 27, 2013 at 10:20 AM

Not working for my blog ....plz sole this problem

March 31, 2013 at 8:52 PM

This is really works to my site here my site but i can you help me to make it on wordpress ?

September 13, 2013 at 7:10 PM

Works perfecty!

However, is there anyway we can make the breadcrumbs with not the LABEL, but some specific link?
Because the Label just lead to summaries of all posts with label, that looks ugly.
Could we define something like another page.

If label=xxx, url=yyy.html
where "yyy.html" might be the page that summaries (automatically, but well arraged) the posts with label "xxx"

Anyway, thanks very much for your valuable tips and tutorials. Keep posting!

My site

Editorial Team MOD
September 15, 2013 at 3:33 PM

If we develop something like this, we will surely share it. Thanks

March 8, 2016 at 7:36 AM

I want to remove this widget, how I do it?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.