How to add breadcrumbs for blogger with best SEO tips

Summary : This useful tutorial teaches you that how you add Breadcrumbs to  blogger blog easily and also it gives users a way to keep track of their location within programs or documents  and main benefit is that breadcrumb displays visitors location accordingly

By this useful article you teach that how you add breadcrumbs  to blogger blog like  Wordpress blogs and also you are feeling  that it should be in blogger blog. If you cannot understand what I mean or what a breadcrumb is meant see the definition below I have found it from Wikipedia. 


Definition of Breadcrumbs
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. The trails like Home >> Label >> Post Name are the breadcrumbs. You should find this guide pretty easy and very simple. 

Benefits of Breadcrumbs 

There are lot of benefits of Breadcrumbs  and also better  SEO tips and benefits. Whether you are using a custom template or a default Blogger template breadcrumb navigation can be added. Adding a breadcrumb to your blogger blog,  it provides a form of text-based navigation. A breadcrumb displays the visitor's location within a your blogger blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

How to install Breadcrumbs

It is not difficult  by this useful blogger tutorial I guide you  step by step how to add breadcrumb navigation to blogger blog so do not long wait now lets get started.

1.  Login to your blogger dashboard

2.  Go to Layouts and then Edit HTML
 

3.  Then I would suggest you download the whole template first then continue editing.
 

4.  Then tick the Expand widget Template.
 

5.  Now find  this code in your blogger template
     

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

6.   Now replace it with the below code
      

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

7.   Now find another code has given below.
 

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

8. Now replace the above code with below large code immediately
 

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

9.     Now find this ]]></b:skin> and replace it with the below code.
 

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

I hope this useful article will be profitable for you and other blogger owner, if you like it , or want to suggest me, please leave your comments.