Monday, 24 February 2014

How to Add Breadcrumbs In Blogger BlogSpot?

Breadcrumb is the navigation area which explains the visitor’s location on your site as well as blog. Means it may help to understand the visitor of your blog that at which location of your respective blog they are. It is used to make navigation easy for your visitors and attain more pageviews from them. You'll find numberless benefits of using breadcrumb in blogger blogs. It also aids you to increase your site visibility to search engines by having keywords into your site posts. For example if you a land on post how to submit blogger sitemap to Google and tag it with the label title SEO then it will create a new navigation trail at the top of your post title as shown below. So If you are interested to add breadcrumbs navigation to your blogger blogspot blog then start rolling your fingers on the tutorial.

Advantages Of Breadcrumbs Navigation:

  • Reduces Bounce Rate
  • Builds Strong Interest
  • Easy to Back Track
  • Improves Usability

How to Add Breadcrumbs in Blogger?

  • Go to >> Template.
  • Backup your template.
  • Now Select Edit HTML.

Then Within the Template search for ]]></b:skin> and above it paste the Following CSS Coding. 

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

Now once again, Search for <div class='blog-posts hfeed'> and just below it paste the following XML coding.

<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-mbb'>
<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>

Congrats! You have successfully added breadcrumbs navigation trail in your blogger blog.

Final Touches:

I hope you successfully added Breadcrumbs in your blogger blog. If you feel any difficulty or for any suggestions please use comment box till then Peace, Blessings and Happy Navigating.

1 comment:

  1. It is not working please help bro....................