add breadcrumbs to a blog within 60 seconds

Adding Breadcrumbs to your blog or website will help you for easy navigation.if you Add breadcrumb to your blog your visitor should be able to find information which they want quickly and easily.Adding this tools will bring your site boost in search result. Add breadcrumbs will contain more than one text link and using keyword. In this article Blogger is an important keyword and that will help me to rank high on seo search results as compared to other websites and blogs.. In search results Breadcrumb elements will be shown instead of your blogger and website URLS. Example : http://www.myblogtips.org/2012/12/Add-breadcrumbs-to-blog.html will replace with in search result www,.myblogtips.org >>blogger>>breadcrumbs. Let's see how to install this tag.

What is Breadcrumbs ?

Breadcrumbs are always appear Horizontally on top a web page and often on below blog title bar and headers. Breadcrumbs will provide a link of each previous page user are navigated on current page.

Breadcrumbs looking like below style

Home >>Main category >>sub category

How to add or install Breadcrumbs to a blogspot blog ?

Go to Layouts menu and then click on Edit HTML

Then I would Suggest you download the whole template first then Continue Editing.

Then Tick the Expand widget Template.

Now find for this Code from Ctrl+F :

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

Now Replace it with the below code :

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

Now Find the code below :

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

Now put the below code before above tag :

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <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>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>

Now Find

<div class='blog-posts hfeed'>

and add below code after above tag

<!--Breadcrumb Hack - disable default status message

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

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

Now find ]]></b:skin> and add below code before ]]></b:skin> :

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;} ]]></b:skin>

Save your templates .....