Be Confident! Face Breadcrumbs For Blogger Positively.

What is Breadcrumbs?

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents.

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

Breadcrumbs For Blogger

Step 1: Save your template

Go to the Layout tab >> Edit HTML.
Download your template as an XML-file and save it onto your PC.

Step 2: Enlarge the widget code

Now check the checkbox to display your template's XML-code. Ready to hack? Now 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 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 turn 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 repair).

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

 Add the following code 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/>

Without delay 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 == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187;  <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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</b:if>
</b:loop>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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 (of your mouch) the link and select "Save as..." to save the XML-file on your PC. 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 set. 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:Now Save your template and view the results!


Troubleshooting
The above code was copy-pasted directly from my blog template into this post, so it should be fault -free if your copy-paste it into your template.

Be sure to own the most recent widget-versions in your model. As you perhaps grasp (or although, perhaps not) the widgets code (such as your web log Posts) is updated frequently by Blogger, providing you with new functionalities. However if you have got hacked into the code of the gismo, Blogger won't update to the latest version of the code.

If you would like to make sure that the foremost recent version of a gismo is gift on your web log, you'll be able to click the "Return to default widgets"-link within the Layout-HTML editor.

If you are doing not feel comfy regarding modifying the code of your web log, produce a brand new check web log for testing functions. Add some spume posts (filled with nonsense text and faux labels), and see if the breadcrumbs

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

More From Webworld