Breadcrumb for Blogger | How to add it!

Breadcrumb is a link source which shows the path of URL from start to end or current.

For example
Home >> D >> DTDC Full Form

In above example - Home is main page or index, D is the category and DTDC Full Form is the title of the post or article.

So it will be show on your blogger template?

Mostly web developer's or publisher's want to put it on above article and title too. Which looks great and help to a little bit increases in page views.

How to add breadcrumb in blogger?

It's so simple to add. To add it, You need to access your code window of your blog.

Step 1. Go to your website and click on Template and then Edit HTML.

Step 2. Click any where and press Ctrl+F to open search bar. Paste below code in search bar and click enter.

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

Step 3. It's time to add below code before the above code.

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

Step 4. Again search a code which is given below.

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

Step 5. Again copy below code and paste before the above code. That's 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>

Step 6. CSS is necessary to design your breadcrumb in blogger so add some given below code beofre </head> tag.

.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;
}

Everything has been done just save the template and go ahead. Do not forget to take a backup while changing in code.