Breadcrumbs nothing but in other words page navigation which shows where you are and helps you to go to previous page. This feature gives your blog a professional look.

Suppose if you are viewing “Ads in middle of posts” post in my blog it there appears a breadcrumb at top of page like “You are at » Home » Tricks » Ads in middle of posts”. When you click on Home link in this it will take to my blog hoe page.



To apply these codes on your blog follow below instructions.

Before applying this code 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.

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

Step 1: Go to Edit HTML page and check Expand widget template check box.
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/>

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

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

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

<b:skin><![CDATA[/*
....
.breadcrumbs {
float: left;
width: 500px;
font-size: 12px;
margin: 5px 10px 10px 10px;
padding: 0px 0px 3px 0px;
border-bottom: double #EAEAEA;
}
....
]]></b:skin>