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 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’>
<!– 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/–>
-
- 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;
}
- Click on save template button.
- Done!