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!


December 21, 2012 at 12:06 PM

not working

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

December 22, 2012 at 1:24 AM

it is not working for me

and 1more thing can u post how to remove unwanted codings from blogger blog template :)

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

December 22, 2012 at 1:39 AM

when i open any post of my blog automatic browser closed

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.

December 22, 2012 at 6:24 AM

now my blog is fine but not showing Breadcrumbs

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

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

December 26, 2012 at 8:52 PM

there are two skins in template coding which one i should find ?

December 26, 2012 at 11:02 PM

this is not working which skin i should find :?
tell me???

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.

December 27, 2012 at 9:43 PM

are u talking about this skin

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

Yes Of course!

December 30, 2012 at 1:55 AM

it doesnot works bro .............i like this but failed to place on my blog can u help me :(

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

December 31, 2012 at 9:31 PM

now i had remove 3-4 gadgets from my site :( try to solve my problem now :(

December 31, 2012 at 9:51 PM

i have 1 Q
can i autohide mbl stick footar bar ?

January 3, 2013 at 10:04 PM

Have u have recieve my mail.?

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

Yes, We will solve your problem. Sooner

January 7, 2013 at 11:44 PM

also remove unwanted codings :(

January 12, 2013 at 8:56 PM

had u solve my problem

January 12, 2013 at 8:58 PM

if u have another template which includes some nice gadgets and this one do give me the link :)

January 25, 2013 at 10:33 PM


January 25, 2013 at 10:35 PM


January 25, 2013 at 10:37 PM


February 14, 2013 at 10:13 PM

this is not works on my blog
i m using tepmlate from templateism plz solve this plz plz

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.