How to Create Breadcrumbs in Blogger

How to Create Breadcrumbs in Blogger

As Blogger, we should know How to create breadcrumbs in the blog. Because it is the most important part of any blog or website to provide easy navigation-related content to go for previous and next content. Thus we can improve user reading ability and SEO strategy. So breadcrumbs provide easy navigation for blog visitors. Now let us learn how to add breadcrumbs to the blog.

First of all, go to your blog, Click on Template

Now click on the Edit HTML button

In the code, press CNTRL+F buttons to search 

<div class='blog-posts hfeed'>

Now you can find the same two div tags, But stop at the first  div hfeed tag

Just below it, paste the below code 

<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>

Then SAVE and View Blog so you can observe the breadcrumb navigation in the below image

From this, we learned how to create breadcrumb navigation in blogger.

Conclusion

If you know more about creating Breadcrumbs in Blogger, Please comment, or share this content to help others.