Add Breadcrumbs in Blogger Tips and Tricks

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

Note: Please backup your blog template before adding breadcrumb navigation in your blog.

• Read: How to backup template in blogger?

Now follow below steps:

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


2. Now press Ctrl+ F and search for below code.




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



3. Replace that code with the below one.



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



4. Now find this code in your blog template.



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



5. 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.makemoneyfreewithus.blogspot.com/-->



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



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



7. Click on save template button.
8. Done!