Breadcrumbs for Blogger

With my new Blog Skin I also introduced a "Breadcrumb Trail" to my Blog. If this doesn't ring a bell, don't worry. Remember the Hansl & Gretchen fairy-tale?

Hansl and Gretchen were 2 kids from a very poor family. The parents were so poor that they had nothing to feed their children, and between them decided to take the kids into the forest and leave them to the wild animals. Hansl and Gretchen discovered these terrible plans, and decided to take pre-emtive measures. They took with them a piece of bread, and dropped breadcrumbs along the trail in order to find their way home. As might be expected, they didn't find home and they were captured by an evil witch (the breadcrumbs were eaten by birds, I guess). But the general idea got a strong foothold in the internet world, and nowadays you can find a breadcrumb trail on many a website to find your way back to the Home Page.

On the main page of my Blog there is no breadcrumb, because that is .... Home!

But as soon as you click on a specific post title, or on a label, or on an archive entry, you will see how the breadcrumb magically appears on top of the page:

Browse » Home » Tutorials » Breadcrumbs for Blogger

Now, here is an easy piece of code to put into your template, and breadcrumbs will be yours!

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

<div class='blog-posts hfeed'>

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

<data:adStart/>

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

<div class='blog-posts hfeed'>

<data:adStart/>

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

<b:includable id='main' var='top'>

<div class='blog-posts hfeed'>

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

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

You can also download the xml-code for the includable here:
Breadcrumb includable
Right-click the link, and select "Save as..." to save the XML-file on your harddisk. You can open it with Notepad, and copy-paste the code into your template.

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>