Year & Month Breadcrumbs

This is basically an addition to Hoctro's breadcrumb hack (in fact if the user has javascript disabled they'll just see Hoctro's hack in place of mine). Hoctro's hack looks something like:

You are here: Home > Label > Blog Title

Mine looks like:

You are here: Home > Year > Month > Blog Title

This hack assumes a few things (in other words it won't work otherwise).

First it assumes that Settings -> Formatting -> 'Date Header Format' is set to one of the following formats:

• November 28, 2006
• Tuesday, November 28, 2006
• 28 November 2006
• 28 November, 2006

Basically it needs to have the full month name, and the full 4 digit year at the end This is no longer an issue

It also assumes that Settings -> Archiving -> 'Archive Frequency' is set to Monthly

Your posts should also have a title, and the titles can't include the quote character (") This is no longer an issue

As it stands now, this will also only work with English language blogs (Settings -> Formatting -> Language), although theoretically if you were to edit the english month names then it would probably work. For example a spanish blog would translate July to Julio. This is no longer an issue

First, go to Template -> 'Edit HTML' and check the box for 'Expand Widget Templates'. Now go and find the Blog1 widget. It'll start with

<b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">

Then keep scrolling down to the following position as pictured below

and paste the following line as shown

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

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'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<!-- Updated by PurpleMoggy 12/02/2006 http://purplemoggy.blogspot.com -->
  <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 = ' &gt; ';
 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> &gt; ';
 strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
 document.write(strCrumbOutput);
//]]>
</script>
<noscript>
        <b:if cond='data:post.labels'>
           &gt;
          <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'>
            &gt;  <b><data:post.title/></b>
          </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrumbs Hack -->
</b:includable>

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;
}