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'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<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 == &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-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;

}

#breadcrumbs-megabdwap .current,

#breadcrumbs-megabdwap .current:hover{

font-weight: normal;

background: none;

}

#breadcrumbs-megabdwap .current::after,

#breadcrumbs-megabdwap .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):

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