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


Written by Prayag Verma


A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




Want to get these Updates straight to your Inbox , Then Subscribe !




Related Articles


28 comments:

  1. Replies
    1. Thanks a lot Sidharth for the compliment ^_^

      Delete
  2. very nice..thanks for sharing
    please also post some stylish headings which we can use inside any post. Thanks
    http://premium-area.blogspot.com

    ReplyDelete
    Replies
    1. Firstly I am glad Adnan that you liked it
      and yes I will surely share how I create those sub-headings in the posts

      Delete
  3. 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 200x200 Adsense background with white colour like your sidebar widget gives more elegant look at your site.

    Hearty Thanks.
    Your Dearest Friend Trever Reznick

    ReplyDelete
    Replies
    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 ..

      Delete
  4. Brother I Add This Code My Template ...But Not Showing Why My Blog Url

    http://techgod8.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Stalin , Have you added the HTML code in your template ?

      Delete
  5. Thanks Brother ... but i add this code in my template and not showing :(
    my blog (just for test hhh)
    http://arblab.blogspot.com

    Note : i have added the HTMl and CSS codes.
    (hhh i'm note good in english ^_^)

    ReplyDelete
    Replies
    1. Can you mail me your template so that I can fix it for you
      Mail me at support@stylifyyourblog.com

      Delete
    2. hi ! i have fix it ... thanks very much ^_^

      Delete
  6. How to remove microdata from the code?? I want to use multiple labels.. Please help me..

    ReplyDelete
  7. Thanks bro for the Breadcrumbs for Blogger this is big help for me...

    ReplyDelete
  8. Thanks a billion.. I tried several other codes but only worked is yours.

    ReplyDelete
  9. I was waiting for. I had been figuring out how to make Breadcrumbs and the results I found it in your blog. thank you friend

    ReplyDelete
  10. isn't there any simpler and drier way to do this without editing HTML directly ?

    ReplyDelete
  11. Thank you so much for your guide... But sir can you please guide me is this useful with aspects of Bread Crumb using into blog.... as i have read in come other blogs that bread crumb is a bad thing to use as a SEO way....?

    Regards,
    Asim Shahzad
    blog: http://www.hecpak.info/

    ReplyDelete
  12. Pragya.
    Great Post Here.
    Even Works But
    What If I Want the name of post even to be shown!!
    like
    home > wordpress > blablabla :)

    ReplyDelete
  13. hi Prayag. Can't find any of the in my template. Could you help out please http://www.madmadrasi.net

    ReplyDelete
  14. I like you coding but there is a problem in it, can you add color code in Css then users easily see what happen after adding your code in website.
    Regards
    ProblogBooster.com

    ReplyDelete
  15. i want to know how to get admin badges

    ReplyDelete
  16. Awesome article dude..i been trying many breadcrumbs tutorial only this works perfectly.. but how can i adjust the margin of the label? please check www.interestingsecret.com

    ReplyDelete