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

Related Articles

Written by Prayag Verma

A self proclaimed Blogger Evangelist. He has been blogging for the past 3 years and likes to help people having problems with Blogger . Get more from Prayag on and Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

Awesomeee !!!

Rounak Baral said...

Really Awesome..

very good

Adnan said...

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

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

Prayag Verma said...

Thanks a lot Sidharth for the compliment ^_^

Prayag Verma said...

Thanks again Rounak

Prayag Verma said...

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

Prayag Verma said...

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

techgod8 said...

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

http://techgod8.blogspot.com/

Prayag Verma said...

Hi Stalin , Have you added the HTML code in your template ?

Imed Adel said...

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 ^_^)

Prayag Verma said...

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

Imed Adel said...

Ok !

Imed Adel said...

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

Jatan Mehta said...

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

Anonymous said...

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

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

Ary_Putra said...

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

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

Asim Shahzad said...

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/

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

mad madrasi said...

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

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

kanu said...

will this work in google?

James magar said...

i want to know how to get admin badges

It's work. thank's
Blogger

John Sparrow said...

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