How To Add Stylish Breadcrumbs Navigation In Blogger Post

Breadcrumbs are navigational elements that are used to display the depth at which a user currently is in a website. Normally they are present near the top preferably just above post heading or the main heading of a page. In Blogger there are no real sub-directories for which you can show a hierarchical path so we will be using Labels as workaround. We will also be discussing how to display single or multiple Labels in Breadcrumbs and how you make them appear in Google Search Results using Microdata specification.

Why use Breadcrumbs Navigation?

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

Easy to track-back: As I mentioned above, breadcrumbs navigation let's track back to related category and to the homepage in a single click.
Reduces bounce-rate: No doubt! when you provide a user-friendly interface to your visitor, it will definitely reduce your blog's bounce rate.
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 hfeed'> 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 hfeed'> tags, make sure you have to work with the first one.

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

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

<ul id='breadcrumbs-megabdwap'>
<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>

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

#breadcrumbs-megabdwap {

background: #eee;

width:auto;

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-megabdwap li{

float: left;

}

#breadcrumbs-megabdwap 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-megabdwap li:first-child a{

padding-left: 1em;

border-radius: 5px 0 0 5px;

}

#breadcrumbs-megabdwap a:hover{

background: #bebebe;

}

#breadcrumbs-megabdwap a::after,

#breadcrumbs-megabdwap 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-megabdwap a::after{

z-index: 2;

border-left-color: #ddd;

}

#breadcrumbs-megabdwap a::before{

border-left-color: #ccc;

right: -1.1em;

z-index: 1;

}

#breadcrumbs-megabdwap a:hover::after{

border-left-color: black;

}

#breadcrumbs-megabdwap .current,

#breadcrumbs-megabdwap .current:hover{

font-weight: bold;

background: none;

}

#breadcrumbs-megabdwap .current::after,

#breadcrumbs-megabdwap .current::before{

content: normal;

}

ul{

margin: 0;

padding: 0;

list-style: none;

}