How to Add Breadcrumbs in Blog-spots? - Blogger

Blogger breadcrumbs are really very useful in Blog. Mainly it shows where the user navigates in the blog or website. Moreover, it helps in SEO too. To know more about Breadcrumbs Click Here.

In blogger, breadcrumbs are not available in the admin panel. I hope they'll add that in the future. So, how to breadcrumbs in templates through a piece of code.

Just follow the instructions:


Step 1: Edit in Html

Go to the Blogger Dashboard, then go to Templates > Edit Html

Step 2: Add Blogger Breadcumbs

Copy the given code, then go to html and click (Ctrl + f) then paste the first code in the search box and find the first code.

First Code:          <div class='blog-posts hfeed'>                          

You'll find this code in the blog. Then Copy the second code and paste that in the below of this text.

Second Code:
==================================================================

<!--breadcrumbs start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'> &#187;
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                </b:if>
            </b:loop>
            <b:else/>
            &#187; Unlabelled
            </b:if>
            &#187; <span><data:post.title/></span>
        </b:loop>
        </span>
    </p>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='breadcrumbs'>
  <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <data:blog.pageName/>
    </p>
</b:if>

<!--breadcrumbs end-->

================================================================

Step 3: Save the file now.

Save your file properly and refresh your page.

Congratulations! You're done.