How To Add Breadcrumb Navigation To Blogger Blog's

Breadcrumb is a name given to those navigation links whose usually displayed above posts of blogs and at the top of the websites.This is a powerful tool to check from where we start searching a site, for example first we land on a site's homepage the Breadcrumb Navigation show only Home link and if we enter into a label then the name of that label comes after home link.

It looks like If we come on Home of a website and then go to any label of that site and then enter on any post this search will come in a formative manner in links.All this look like Home > Label > Post Tittle.

All big blog's and websites have Breadcrumbs and these links looks cool above post but blogger doesn't provide the facility of Breadcrumb.

So today i'll show you how to add breadcrumb on your blog by editing your blog's template and make your blog  search engine friendly with attractive look.

Below you can see a screen shot of Breadcrumb and a live demo. Through which you will understand each and every thing perfectly.

Adding Breadcrumbs Navigation To Blogger

One thing always remember before editing your template to backup your template.

Step 1.) First go to your blogger Dashboard and Click on Design > Edit HTML > Tick the expand Widget Template Box

Step 2.) Find the following piece of code in your Blog's HTML ( Click CTRL + F for a search bar to search the following piece of code)

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

Step 3.) Now replace the code with this below given code.

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

Step 4.) Now find the following piece of code (Click CTRL and F for search bar for help in finding 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.tekleisure.blogspot.com/-->

Step 6.) After adding the above code find the following piece of code in your Blogs HTML.

]]></b:skin>

Step 7.) Now replace the above code with this code given below

/* Breadcrumbs Css info @ http://www.tekleisure.blogspot.com/ */
.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 now Breadcrumbs added on your blog and check it out yourself how these Breadcrumb looks like on your blog

Drop your comments, Questions and suggestions below.