How To Add Breadcrumbs in blogger templates

Table of Contents

Breadcrumbs seo navigation is used for improve blogs in individual post detailed to improving with labels, Tags or Categories and post title at below the Head, above the post title so in search google engine searcher know what lable and title in post he read. e.g breadcrums website in blogger is important like breadcrumbs yoast seo recommended in wordpress :

Home > Blogger > How to make breadcrumbs in Blogger

Make bloger isn't imposible and difficult to have brradcrumbs blogspot, you must have skills how to edit template, tag conditional. You can't wrong in placing html code. Back up before you save template or uploading blogger template so you can upload original blogger if you're wrong place codes.

How to instal  breadcrumbs in blogspot :
Go to Dashboard then template and edit html 
First, Search in template this code

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

, if founding two above codes, you must use second code and copy paste below code before this code

 <b:include data='posts' name='breadcrumb'/>

Second, search this code

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

and copy paste next code after it

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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"'>
<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>

For styles paste this for breadcrumbs css

.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #e6e4e3; font-weight:bold; }

before ]]> or in the middle <style type="text/css"> css above</style> find that and search between head tag . Save and Congratulations breadcrumbs navigation widget for blogger has ready, check and view your posts urls.