How To Add Breadcrumbs in Blogger?

How To Add Breadcrumbs in Blogger?

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.

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

Now follow below steps:

Go to Dashboard ->> Template ->> "Edit HTML"
Click "Proceed" and make sure you check the box to "Expand Widget Templates"
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://softwaresurf.blogspot.com/-->

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

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

}

Save template
YOU ARE DONE!!