How Install Breadcrumb in Blogger Blog

I have just found this, so it is new (to me) and I think you also want to know about it and how to have one installed in your blog, whether or not you are using an adsense ready blogger template.


So, what is a breadcrumb? I don't want to explain much about it to you, but you can have look to this image below.

Right! A breadcrumb is actually a line that displays in which page of your blogger blog your readers are now and position of that page in relation to its label and homepage. Maybe not quite right, but you know what I'm trying to say. It is like a directory!

So, how you can have in your Blogger blog?

1. Log in to you Blogger and in the blog you want to have a breadcrumb in, click Layout | Page Element | Edit HTML
2. Search for this code: 

]]></b:skin>

3. Replace the above code with the following one:

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

}

]]></b:skin>

4. Then, search for this code:

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

5. Replace that code in #4 with the following on

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

<b:include data='posts' name='breadcrumb'/>

6.Again,  search for this code: 

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

7. Replace the code in #6 with the code below:

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

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

<b:else/>

»Unlabelled

</b:if>

» <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>

</span>

</p>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == ""'>

<a expr:href='data:blog.homepageUrl'>Home</a> » All posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>

</b:if>

</span>

</p>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

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

8. Save your template.
9. Done! Your blogger blog now has a breadcrumb!