Withmy 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'>
<!-- posts -->
<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'><br /> <!-- posts --><br /> <div class='blog-posts hfeed'><br /> <span style="color: rgb(255, 0, 0);"><!-- disable default status message</span><br /> <b:include data='top' name='status-message'/><br /> <span style="color: rgb(255, 0, 0);">default status message disabled --></span><br /> <data:adStart/><br />
Now add the following line, that will call our breadcrumb includable:
<b:includable id='main' var='top'><br /> <!-- posts --><br /> <div class='blog-posts hfeed'><br /> <!-- disable default status message<br /> <b:include data='top' name='status-message'/><br /> default status message disabled --><br /> <span style="color: rgb(255, 0, 0);"><b:include data='posts' name='breadcrumb'/></span><br /> <data:adStart/><br />
Immediately above this 'main' includable, insert our new breadcrumb includable:
<small style="color: rgb(0, 102, 0);"><b:includable id='breadcrumb' var='posts'><br /> <b:if cond='data:blog.homepageUrl == data:blog.url'> <br /> <!-- No breadcrumb on front page --><br /> <b:else/> <br /> <b:if cond='data:blog.pageType == "item"'> <br /> <div class='breadcrumbs'> <br /> Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <br /> <b:loop values='data:posts' var='post'><br /> <b:if cond='data:post.labels'> <br /> <b:loop values='data:post.labels' var='label'> <br /> <b:if cond='data:label.isLast == "true"'> » <br /> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <br /> </b:if> <br /> </b:loop> <br /> » <span><data:post.title/></span> <br /> </b:if> <br /> </b:loop><br /> </div> <br /> <b:else/> <br /> <b:if cond='data:blog.pageType == "archive"'> <br /> <div class='breadcrumbs'> <br /> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> <br /> </div> <br /> <b:else/> <br /> <b:if cond='data:blog.pageType == "index"'> <br /> <div class='breadcrumbs'><br /> <b:if cond='data:blog.pageName == ""'><br /> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts<br /> <b:else/><br /> Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/> <br /> </b:if><br /> </div> <br /> </b:if> <br /> </b:if><br /> </b:if><br /> </b:if><br /></b:includable><br /><b:includable id='main' var='top'></small><br />
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[/*<br /><br />....<br /><br />.breadcrumbs {<br /> float: left;<br /> width: 590px;<br /> font-size: 11px;<br /> margin: 5px 10px 20px 10px;<br /> padding: 0px 0px 3px 0px;<br /> border-bottom: double #EAEAEA;<br />}<br /><br />....<br /><br />]]></b:skin><br />Step 5: Save your template
Save your template and view the results. Enjoy!
Troubleshooting
The
code above was copy-pasted directly from my template into this post, so
it should be error-free if your copy-paste it into your template.
Be
sure to have the latest widget-versions in your template. As you maybe
know (or then again, maybe not) the widgets code (such as your Blog
Posts) is updated regularly by Blogger, providing you with new
functionalities. But if you have hacked into the code of the widget,
Blogger will NOT update to the newest version of the code.
If you
want to be sure that the most recent version of a widget is present on
your blog, you can click the "Return to default widgets"-link in the
Layout-HTML editor.
If you do not feel comfortible about
modifying the code of your blog, create a new testblog for testing
purposes. Add some Lorem ipsum posts (filled with nonsense text and fake
labels), and see if the breadcrumbs work. If everything works fine,
port it to your real blog.
