Add Breadcrumb Navigation in Blogger with Rich Snippets Markup

Breadcrumbs are a simple navigation tool to make the life easier to average visitors to navigate around your website or blog. It helps user to understand the hierarchy and structure of the website, and most importantly allow visitors to understand the categories of the content.

breadcrumb navigation for blogger

Not only it helps in navigation; it also helps to enrich your websites SERP (Search Engine Result Page). Using RDFa markup, you can put your breadcrumbs’ link on the search results of your website or blog for rich snippets. Also you can add breadcrumbs without the markup; as the main purpose of it is aiding in navigation.

For Blogger blog’s the labels of posts are used as breadcrumbs as there are no plugin or settings directly available in Blogger.
In this post one by one you will know;

  1. How to add breadcrumbs in Blogger blogs is described,
  2. Breadcrumbs code for Blogger with and without RDFa markup. And tips to understand and modify them for matching your blog’s design structure.
  3. Some examples of breadcrumbs with different design, color and HTML code if modification.
  4. Impact of Breadcrumbs in your Blogger blog and weather to use them or not.

How to Add Breadcrumbs in Blogger Blogs

Follow the instructions below:

    1. Go to Blogger Dashboard of your blog > Template.
    2. Back Up your template and then click on ‘Edit HTML’.
    3. On the template editor search for;
      <b:includable id='main' var='top'>
    4. Paste the following code just below and inside the above code;
      <b:include data='posts' name='breadcrumb'/>
    5. Now again in the template search for;
      <b:includable id='main' var='top'>
    6. Paste your breadcrumbs code just above it. The code is giving along with modification techniques below in the post.
      <!-- paste the breadcrumbs code here -->
      <b:includable id='main' var='top'>
    7. Now to add CSS code for the breadcrumbs; look for ]]></b:skin> and paste the style codes just above it. Or you can search for </head> and paste the style code inside of a new or existing <style> tag.
    8. Save you template by clicking ‘Save template’.

This is all is required to add breadcrumbs in Blogger blog. <b:include data='posts' name='breadcrumb'/> indicates where you want to show the breadcrumbs. Best place for breadcrumbs is just above the post title.

If it is not placed properly then try to add add <b:include data='posts' name='breadcrumb'/> in a different place inside the <b:includable id='main' var='top'>.

Breadcrumbs codes for blogger are given below;

Breadcrumbs Code #1: Using RDFa markup

The RDFa markup is supported by major search engines like Google and Bing. The breadcrumb code with RDFa markup is given below;

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='//rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a>
</span>
<b:loop values='data:post.labels' var='label'>
&#187; 
<span typeof='v:Breadcrumb'>
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop> &#187; 
<span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Breadcrumbs Code #2: Not Using Any Markup

If you do not want breadcrumbs to be shown in the SERP but want to use them for navigation purpose, then all you need to do is remove all markup from the above code. Remove xmlns:v='//rdf.data-vocabulary.org/#', typeof='v:Breadcrumb', property='v:title' rel='v:url' from the above code.

After removing them this code will be;

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span>
<a expr:href='data:blog.homepageUrl'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a>
</span>
<b:loop values='data:post.labels' var='label'>
&#187; 
<span>
<a expr:href='data:label.url'><data:label.name/></a></span>
</b:loop> &#187; 
<span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' rel='tag'><img src="//4.bp.blogspot.com/-wkCJgg0SbRw/VJNlLKPf0iI/AAAAAAAABSk/7ET68Jytluo/s1600/Home.gif" alt="Home"/></a></span>
&#187; 
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

Choose any one of the code for breadcrumbs in your Blogger blog.

Stylish CSS Breadcrumbs for Blogger Blogs

To add this CSS code in your Blogger template for the go breadcrumbs to the template editor and look for ]]></b:skin> and paste the style codes just above it, or you can search for </head> and paste the style code inside of a new or existing <style> tag.

In below some CSS code for breadcrumbs is given along with the screen shot of how will they look. Also tips for modification in the code if necessary.

CSS code for Breadcrumbs #1

breadcrumb navigation for blogger

.breadcrumbs {max-width:95%;text-transform:capitalize;padding:3px 15px 5px 10px;margin:10px auto;font: 14px Cambria,Segoe UI,Tahoma,sans-serif;line-height: 1.5em;color:#515151;text-align: left;background:#fff;border:1px solid #ddd;border-bottom-color:#ccc;-moz-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);-webkit-box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06);box-shadow:0 -1px 0 #fff,0 1px 1px rgba(0,0,0,0.06)}
.breadcrumbs span > a {color:#515151}
.breadcrumbs span > a:hover {color:#0631DD;text-decoration:none}
.breadcrumbs > span {color:#515151;text-align:left;line-height:1.5em}

Please note that for the code 2 to 5 you must to remove &#187; from the given breadcrumb code.

CSS code for Breadcrumbs #2

breadcrumb navigation for blogger

.breadcrumbs {
font-size: 14px;
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(top, #eeeeee 0%,#cccccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
height: 25px;
line-height: 25px;
color: #454545;
border: solid 1px #cacaca;
width: 100%;
overflow: hidden;
margin-bottom: 5px;
padding: 0px
}
.breadcrumbs span {
float: left;
padding-left: 5px
}
.breadcrumbs a {
height: 25px;
display: block;
background-image: url('//3.bp.blogspot.com/-jTvGloEUJhk/VJNlMvYcsJI/AAAAAAAABSs/OF83Kp034d8/s1600/arrow.png');
background-repeat: no-repeat;
background-position: right;
padding-right: 15px;
text-decoration: none;
color: #454545
}

CSS code for Breadcrumbs #3

breadcrumb navigation for blogger

.breadcrumbs {
font-size: 14px;
height: 30px;
line-height: 30px;
color: #454545;
border-top: solid 1px #cacaca;
border-bottom: solid 1px #cacaca;
width: 100%;
overflow: hidden;
margin-bottom: 5px;
padding: 0px;
}
.breadcrumbs span {
float: left;
padding-left: 5px
}
.breadcrumbs a {
height: 30px;
display: block;
background-image: url('g');
background-repeat: no-repeat;
background-position: right;
padding-right: 15px;
text-decoration: none;
color: #454545
}

You are more than welcome to play with the CSS and if required the HTML codes for matching them with you template color and design.

Should you use Breadcrumbs on Blogger Blogs ?

Breadcrumbs are must for e-commerce sites But it has advantages for blogs too if you are able to categorize you Blogger blogs with labels properly. It will help visitors understand where they are now on your site and not to mention the navigation ease it will provide to your blog’s visitors.

Make sure to add as few labels with your post as possible. If you add too many labels with posts then the breadcrumbs will look bad in the blog. Also in the search results it will create a problem and confusion.

The purpose of breadcrumbs with markup is that; the breadcrumbs links will be shown on the search results of you blog or website. That means people can go to the deep in to your blog pages directly from the search results. So that is a huge plus point for SEO.

But currently Google have removed the links from the breadcrumbs. But texts are still showing but they are now unclickable. Also we found that Bing is not showing them at all.

Despite this I suggest you to use breadcrumbs on you Blogger blog. But can avoid the markup for it as currently Google and Bing made them unlickable.

I will try to add more CSS examples of breadcrumbs in this post. If you are facing issues or have any question regarding breadcrumbs on Blogger then do put them forward in the comments section. Don’t forget to share and subscribe.