How to add Breadcrumbs in Blogger Template

What is Breadcrumb?

A “Breadcrumb” is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.

Why you should use Breadcrumbs?

Breadcrumbs are an essential element of an SEO friendly website as they make navigation easier.

That’s the main role of breadcrumbs and this is why users love them. They encourage people to visit more pages of a website before they exit and thus they reduce the bounce rate. They are good for SEO.

It improves the internal linking of your website. Hence we can say that breadcrumb is one of the internal linking technique of SEO.

Where do you place breadcrumbs?

Place breadcrumbs at the top of the page, above the content and main title.

How to add breadcrumbs in blogger template?

Blogger does not provide any easy to implement facility for breadcrumbs till now, maybe it will be available in future.

But you can still add breadcrumbs by editing your blogger template. Here are the steps for adding the breadcrumbs.

Step 1: Edit HTML

In Blogger admin panel go to Theme > Edit HTML

Step 2: Finding a proper place to paste code

In the Edit HTML, press ctrl+f and search the below code:

<div class='blog-posts hfeed'>

Here’s the code:

<!--breadcrumbs start-->
<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:if>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <p class='breadcrumbs'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<!--breadcrumbs end-->