Breadcrumbs are the navigation trail based on the labels of your blog post. It makes your website more attractive professional and user-friendly. It helps your visitor to know his location on your blog/website. It also helps crawling bots to understand your post easily and let your posts be with your label in search engine results. For example if you write a post on how to submit blogger sitemap to Google Webmaster Tools and filed it under SEO named label then it will make a navigation trail and appears on the top of your post title as below:

Now lets start rolling your fingers to add breadcrumbs in your blogger blog to make it attractive and user friendly.
  Adding Breadcrumbs In Blogger Blog:
Note: Please backup your blog template before adding breadcrumb navigation in your blog.
Now follow below steps:

    1. Go to Blogger Dashboard > Edit HTML > Proceed > Tick Expand Widget Template Box
    1. Now press Ctrl+ F and search for below code.

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

    1. Replace that code with the below one.

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

    1. Now find this code in your blog template.

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

    1. Replace it with the below 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 by http://www.BloggerDevelopers.com/–>

    1. Find ]]></b:skin> and paste the below code just above/before it.

/* Breadcrumbs by http://www.BloggerDevelopers.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

  1. Click on save template button.
  2. Done!
  Final Words:
So that’s the tutorial to add breadcrumbs to your blogger blog. It makes your blog attractive and more SEO friendly. This widget helps you in increasing your blog’s traffic and reduce bounce rate. Please write your views in comments till then Peace, Blessings and Happy Blogging.