Breadcrumbs for Blogger (blogspot.com)

I found two types of breadcrumbs for Blogger, one based on the category of a post and the second one based on the post's date:

1. Breadcrumbs based on a post's category

This is how it will look like: Browse » Home » Tutorials » Breadcrumbs for Blogger

Step 1: Save your template
Go to the Layout tab, and click Edit HTML.
Download your template as an XML-file and save it onto your harddisk. If anything goes wrong, upload it again and not much harm will be done.

Step 2: Expand the widget code
Now check the checkbox to display your template's XML-code. Ready to hack? Here we go!

Step 3: Add a new Includable
We are going to modify the code of the Blog-widget. The default-widget uses a so-called "includable" (a chunk of code) to display a status-message above your posts when you have selected all posts with a certain label. We will turn off this default status message, and replace it with our breadcrumbs.

Scroll down through your expanded widget code and look for the following piece of code:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>

(It doesn't have to be exactly like that) Now we will switch off the default status-message, by putting comments-brackets around it. (You can also delete the line, but I think leaving it there and commenting it out is more elegant in case you want to track back and debug).

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
  <!-- disable default status message
<b:include data='top' name='status-message'/>
  default status message disabled -->
<data:adStart/>

Now add the following line, that will call our breadcrumb includable:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>
default status message disabled -->
    <b:include data='posts' name='breadcrumb'/>
<data:adStart/>

Immediately above this 'main' includable, insert our new breadcrumb includable:

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl == data:blog.url'> 
  <!-- No breadcrumb on front page -->
  <b:else/> 
    <b:if cond='data:blog.pageType == "item"'> 
       <div class='breadcrumbs'> 
         Browse »  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> 
         <b:loop values='data:posts' var='post'>
           <b:if cond='data:post.labels'> 
             <b:loop values='data:post.labels' var='label'> 
               <b:if cond='data:label.isLast == "true"'> » 
                 <a expr:href='data:label.url' rel='tag'><data:label.name/></a> 
               </b:if> 
             </b:loop> 
             » <span><data:post.title/></span> 
           </b:if> 
         </b:loop>
       </div> 
    <b:else/> 
      <b:if cond='data:blog.pageType == "archive"'> 
        <div class='breadcrumbs'> 
          Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> 
        </div> 
      <b:else/> 
        <b:if cond='data:blog.pageType == "index"'> 
          <div class='breadcrumbs'>
          <b:if cond='data:blog.pageName == ""'>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
          <b:else/>
            Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> 
          </b:if>
          </div> 
        </b:if> 
      </b:if>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='main' var='top'>

Step 4: Add some CSS to the skin
The basic code of your breadcrumb is now in place. You can change its looks by adding a CSS-class .breadcrumbs to the skin of your Blog.
This is just an example:

<b:skin><![CDATA[/*

....

.breadcrumbs {
float: left;
width: 590px;
font-size: 11px;
margin: 5px 10px 20px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}

....

]]></b:skin>

Step 5: Save your template and you are done.

2. Breadcrumbs based on a post's date

This is how it will look like: You are here: Home > Year > Month > Post Title

Step 1: Go to Template -> 'Edit HTML' and check the box for 'Expand Widget Templates'. Now search for some code that looks like this (it doesn't have to be exactly like it):

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>

  <b:include data='top' name='status-message'/>

  <data:adStart/>
  <b:loop values='data:posts' var='post'>

and paste this right under it:

<b:include data='post' name='breadcrumbs'/>

Step 2: Now scroll down to the end of this widget (as pictured below)



and paste the following between the </b:includable> and </b:widget> tags:

<b:includable id='breadcrumbs' var='post'>
<b:if cond='data:blog.pageType == "item"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
        You are here:
        <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<script type="text/javascript">
//<![CDATA[
var strCrumbHref = location.href.toLowerCase();
var intCrumbHtml = strCrumbHref.indexOf('.html');
var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
var intCrumbYearStart = intCrumbWhereAt - 7;
var intCrumbMonthStart = intCrumbWhereAt - 2;
var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
var intCrumbYearPlusOne = intCrumbYear + 1;
var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
var strCrumbMonth = '';
switch(strCrumbMonthNum) {
case '01':
 strCrumbMonth = 'January';
 break;
case '02':
 strCrumbMonth = 'February';
 break;
case '03':
 strCrumbMonth = 'March';
 break;
case '04':
 strCrumbMonth = 'April';
 break;
case '05':
 strCrumbMonth = 'May';
 break;
case '06':
 strCrumbMonth = 'June';
 break;
case '07':
 strCrumbMonth = 'July';
 break;
case '08':
 strCrumbMonth = 'August';
 break;
case '09':
 strCrumbMonth = 'September';
 break;
case '10':
 strCrumbMonth = 'October';
 break;
case '11':
 strCrumbMonth = 'November';
 break;
case '12':
 strCrumbMonth = 'December';
 break;
}
var strCrumbOutput = ' > ';
strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> > ';
strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
document.write(strCrumbOutput);
//]]>
</script>
<noscript>
      <b:if cond='data:post.labels'>
         >
        <b:loop values='data:post.labels' var='label'>
          <b:if cond='data:label.isLast == "true"'>
            <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
          </b:if>
        </b:loop>
      </b:if>
</noscript>
        <b:if cond='data:post.title'>
          >  <b><data:post.title/></b>
        </b:if>
    </span>
    </p>
</b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>

Step 3: Finally, you can style this newly added section. For example, add the following css to your page's header:

.breadcrumbs {
border-bottom:1px dotted $bordercolor;
margin:0 0 0.5em;
padding:0 0 0.5em;
}

Credits: BeautifulBeta & PurpleMoggy