How To Add Breadcrumbs in Blogger?

Breadcrumb is the navigation trail which tells about visitor's location on your site or blog. Means it helps to understand the visitor or reader that at which location of your blog they are. It is used to create a user friendly website where they can easily visit your blog pages without any problem. There are numberless benefits of using breadcrumb trail in blogs. It also helps to increase your site exposure in search engines by adding keywords into your blog posts. For example if you a write post on how to submit blogger sitemap in Google and tag it with the label name SEO then it will create a navigation trail at the top of your post title as below.

Now you have understood what are breadcrumbs and its benefits in SEO. So, let see the steps of adding it into blogger blogs.

Add Breadcrumbs in Blogger to Gain SEO Advantage

Now follow below steps:

Go to Blogger Dashboard > Edit HTML > Proceed > Tick Expand Widget Template Box

Now press Ctrl+ F and search for below code.

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

Replace that code with the below one.

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

Now find this code in your blog template.

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

Replace it with the below code.

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

<b:else/>
<b:if cond='data:blog.pageType == "item"'>



<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>
» <data:post.title/>
</b:loop>


<b:else/>
<b:if cond='data:blog.pageType == "archive"'>



<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>


<b:else/>
<b:if cond='data:blog.pageType == "index"'>


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


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

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

/* Breadcrumbs by http://www.sitessubmit.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;
}