Breadcrumbs for Blogger

breadcrumbs bloggerBreadcrumbs 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('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/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('http://2.bp.blogspot.com/-h7gddS-r9vg/UB5M7efPcMI/AAAAAAAAHBo/hGj9ljonUvM/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

28 Replies to “Breadcrumbs for Blogger”

  1. Dear Prayag!
    Have you ever looking at your site on Internet Explorer? Look on home page and inside post. There are some vital fixes to be done.

    One more thing 200×200 Adsense background with white colour like your sidebar widget gives more elegant look at your site.

    Hearty Thanks.
    Your Dearest Friend Trever Reznick

    1. I am aware that the Header region is very messed up in the IE version and I will fix it for sure , Thanks for making me remember Trever 🙂

      I can't get what you are saying about the AdSense background thing , can you explain a bit ..

Leave a Reply

Your email address will not be published. Required fields are marked *