How to add Breadcrumbs Navigation in Blogspot

To add breadcrumb in blog 1. Login to blogger. 2. Scroll down to Theme. 3. Click Edit HTML and press Ctrl + F. 4. Add and replace the codes below.

1. login to blogger dashboard

2. Scroll down and click on Theme.

3. Select or click Edit HTML (ensure you backup your template).

4. Click Ctrl + F to bring out search button.

5. Add or replace codes below.

Login to blogger dashboard. Choose theme and use Crtl + F to locate below code

1.
<b:include data='top' name='status-message'/>
 and post above  the code it this below code
If it appears twice 2 post on two of them



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

Use Ctrl + F and look for this below code

3.
<b:includable id='main' var='top'>
and post above the second one below code
if it appears twice

4.
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>


Add in your CSS that Customise advance add css

5.
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; }
Not to display all the labels remove these 2 codes

 b:if cond="data:label.isLast == "true"">

/b:if>
from code 4

This solution has been tested.

How to add textarea in blog or wordpress

How to add background colour or blog or WP.

How to add footer widget or gadget advert in blogger.

Get 10 Top Technology gadgets Tips.

How to use image as background blogger post.