How to Add Google Breadcrumb for Blogger

How to Add Google Breadcrumb for Blogger

Today we give you tricks about How to Add Google Breadcrumb for Blogger which will show breadcrumbs on your blog post and it will user frie... 2:35:00 PM

Today we give you tricks about How to Add Google Breadcrumb for Blogger which will show breadcrumbs on your blog post and it will user friendly for your blog. Breadcrumb show visitor's location on your website or blog. There are numbers of benefit for your website or blog by using of breadcrumb like it increase your site exposure in Google search engine. You can see below picture for how is that see on your blog.

Add Google Breadcrumb for Blogger

Please follow below steps to Add Google Breadcrumb for Blogger. Before edit your blog template please backup your template or read our blog post How to backup template in blogger?

Step 1

Log in into blogger dashboard and Go to Template then click on Edit HTML as shown in below picture.

Step 2

Click on Expand Widget Template as show in below picture.

Step 3

Search below code with the help of CTRL + F.

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

Step 4

Replace below code with above code:

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

Step 5

Search below code

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

Step 6

Replace 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'><a href="http://www.haakblog.com/2014/02/download-best-blogger-templates-of-2014.html" rel="dofollow" target="_blank" title="blogger templates"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger templates" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger widgets"><img src="http://img1.blogblog.com/img/blank.gif" alt="blogger widgets" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a>
<!--Breadcrumbs by http://www.haakblog.com/-->

Step 7

Search below code

]]></b:skin>

Step 8

 Replace with below code:

/* 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;
}

Click on Save Template.