How To Add Breadcrumb Navigation To Blogger Blogs

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Breadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this 'Home > Label > Post Title'.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

Below you can see a screenshot and the live demo.Credit for the original breadcrumbs for Blogger goes to Hoctro with further work by Blogger Plugins.

Add Breadcrumbs Navigation To Blogger

Remember Always Back Up Your Template Before You Make Changes - 

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box



Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

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

Step 3. Now Replace it with this code

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

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

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

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

Step 5. Now Replace It With This Code

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

<!--Breadcrumbs code info @ http://www.utvaction4u.co.cc/-->

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

]]></b:skin>

Step 7. Now Replace It With This Code

/* Breadcrumbs Css info @ http://www.utvaction4u.co.cc/ */

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

Step 8. Save your template.

That's it breadcrumbs have been added to your blog.Credits again go to Hoctro and Blogger Plugins.

Do you Like this Article..?

Get Free Email Updates Daily!	Follow us!