Breadcrumbs for Blogger

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


Demo

Video Tutorial

Step by Step Guide

1. Go to Template > Edit HTML and tick the Expand Widget Preview Option

2.  Now search for <div class='blog-posts hfeed'> and add the following code after it

<b:if cond='data:blog.homepageUrl != data:blog.url'> 
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
      <a expr:href='data:blog.url'> <span itemprop='title'><data:blog.pageName/></span> </a>
    </div>
 <b:else/>
  <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' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
           <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == &quot;true&quot;'>
             <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a> 
             </b:if>
           </b:loop>
          </div>
         <b:else/>
          <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
           <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a> 
           <a href='#'><span> Unlabelled</span></a>
         </div>
       </b:if>
     </b:loop>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div class='breadcrumbs ' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
       <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>  
       <a expr:href='data:blog.url'><span>Archives for <data:blog.pageName/></span></a>
      </div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
       <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
        <a class='first' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
        <a expr:href='data:blog.url'><span itemprop='title'>Posts filed under <data:blog.pageName/></span></a>
       </div>
     </b:if>
    </b:if>
   </b:if>
  </b:if>
 </b:if>
</b:if>

You might find multiple instances of the term to be searched , add the code only under that , where you can see this code --> <b:includable id='main' var='top'>

3. Now search for ]]></b:skin> and add the following CSS just before it

.breadcrumbs {
list-style: none;
margin: 0;
}
.breadcrumbs  a {
color: #666;
display: inline-block;
font-size: 12px;
margin-left: -15px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
vertical-align: top;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZi46ZZaILj8XyWe5INZiDn0O1x2ZfWO2hc__hNk1StEWTle7h8iJmdylKTWSAJBEayPT-jpwBoj1S4NZW5ETRcj7_eOct10rtC3w959gdqa4HtdMG1FTB6zHFxWLAS45c4HsjA7P95owj/s1600/hc_yarnlett_global.png');
background-repeat: no-repeat;
background-position: 100% 0;
z-index: 1;
}
.breadcrumbs  a:hover   {
background-position: 100% -48px;
color: #333;
}
.first , .first:hover {z-index: 30 !important;}
.first span {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZi46ZZaILj8XyWe5INZiDn0O1x2ZfWO2hc__hNk1StEWTle7h8iJmdylKTWSAJBEayPT-jpwBoj1S4NZW5ETRcj7_eOct10rtC3w959gdqa4HtdMG1FTB6zHFxWLAS45c4HsjA7P95owj/s1600/hc_yarnlett_global.png');
margin-left: -26px;
padding: 7px 6px 11px 10px;
z-index: 12 !important;}
.breadcrumbs a:nth-child(2) {z-index:29 !important;}
.breadcrumbs a span:hover {
background-position: 0 -48px;
color: #333;
}

4. Save Your Template and Now the Breadcrumbs are going to start appearing in your Post Pages , Label Pages , Archive Pages as well as the Static Pages


Some Options

Display Single or Multiple Labels
The above code just shows the Last assigned Label of the post as the breadcrumb, If you want to show all the Labels as Breadcrumbs then Remove the highlighted Lines in Step 2 (Number 14 and 16) and add the following CSS

.breadcrumbs a:nth-child(3) {z-index:28 !important;}
.breadcrumbs a:nth-child(4) {z-index:27 !important;}
.breadcrumbs a:nth-child(5) {z-index:26 !important;}
.breadcrumbs a:nth-child(6) {z-index:25 !important;}
.breadcrumbs a:nth-child(7) {z-index:24 !important;}
.breadcrumbs a:nth-child(8) {z-index:23 !important;}
.breadcrumbs a:nth-child(9) {z-index:22 !important;}
.breadcrumbs a:nth-child(10) {z-index:21 !important;}
.breadcrumbs a:nth-child(11) {z-index:20 !important;}
.breadcrumbs a:nth-child(12) {z-index:19 !important;}
.breadcrumbs a:nth-child(13) {z-index:18 !important;}

In my experience displaying multiple Labels in Breadcrumbs cost me the Authorship in Google Search. So I suggest using a Single Label only . If you want to use Multiple Labels then I suggest to remove the Microdata specification from it so that there is no risk involved. I don't at all want you to lose your Google Authorship. I will be doing a detailed post about it soon.

 

What is responsible for making them appear in the Google

This is due to Microdata specification used in code. It uses simple HTML tags and attributes to assign descriptive names to items and properties. Google understands it ,interprets them and show them in the serch results

Design

The design this widget uses is the design being used by Google Support currently. It is simple and aesthetic. I will be sharing some more Breadcrumb designs in the days to come.

Who Wrote this Code

This code was originally written by Hoctro , then modified by BloggerPlugins to include the RDFa specification and some other improvements. I have replaced the RDFa Specification by the Microdata Specification as it more expressive and easier to understand . Also some minor changes have been done to the if-else ladder and a completely different design is used.

In case there is some problem while implementing it or using it then feel free to ask in the comments