How To Add Breadcrumbs In Blogger Template: Complete Guide

Hello Guys, you will know in today’s article how you can add
Breadcrumbs in the Blogger template.

Breadcrumbs are very important to be engaged in any blog or website.

Because there are many error shows related to breadcrumbs in the search console. It is very important to fix them.

But often many people are not aware of Breadcrumbs but they must have seen


    When we open a website or blog post, we get a Breadcrumbs show. The picture below shows Breadcrumbs.


    So today you will know more about Breadcrumbs and you remained with us in this

    Which will know how to add breadcrumbs in the blogger template.
    So let’s start.

    What is Breadcrumbs

    Breadcrumbs is a navigation system in text form. This tells the
    visitor who comes to our blog or website that which category of the post of
    that blog you are in.

    Breadcrumbs are in the top section of our blog post.

    It looks common. But from the perspective of Google,
    Bing, and other search engines, it is very useful.

    This shows our blog structure post. If you do not use it in your blog, then you
    will get the error of breadcrumbs through your search console.

    Benefits of Using Breadcrumbs

    1. It does the work of navigation in the blog. Which acts as a navigator for
      the visitor.
    2. This helps make any blog user friendly.
    3. It also shows the particular category of any of your posts.
    4. Breadcrumbs are useful from a search engine perspective.

    How to Add Breadcrumbs in Blogger Template


    #Step1: First Login to your Blogger Account.

    #Step2: Now Click on the Theme.

    blogger theme

    #Step3: Then Click on Edit HTML.


    edit html

    #Step4: Click and Press Ctrl + F from your

    #Step5: Find <b:includable id=’post’ var=’post’>Tag

    <b:includable id=’post’ var=’post’>




    #Step6: Now replace the found code with the below code.

    <b:includable id=’post’ var=’post’>
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <div itemscope=” itemtype=’’>
    <div class=’BreadCrumb_Blogs’>
    <a expr:href=’data:blog.homepageUrl’ itemprop=’url’ title=’Home’>
    <span itemprop=’title’>Home</span></a>&#187;
    <b:if cond=’data:post.labels’>
    <b:loop values=’data:post.labels’ var=’label’>
    <span typeof=’v:breadcrumb’>
    <a expr:href=’data:label.url’ itemprop=’url’ title=’Categories’
    property=’v:title’ rel=’v:url’>
    <span itemprop=’title’><></span>
    <b:if cond=’data:label.isLast != &quot;true&quot;’>|
    <a expr:href=’data:post.url’ itemprop=’url’ title=’Post Title’>
    <span itemprop=’title’>

    #Step8: Find

    #Step9: Paste the below given Code over </b:skin>


    .BreadCrumb_Blogs:before {

        font-size: 85%;

        letter-spacing: 2px;


     .BreadCrumb_Blogs {

        width: auto;

        padding: 0 0 5px 10px;

        margin: 0 5px;

        font-size: 95%;

        border: 2px solid #EDE;

        border-top-left-radius: 10px;

        border-top-right-radius: 10px;

        text-align: left;

        color: #d5d5d5;

        background: black;

        line-height: 22px;



    #Step9: Click On Save

    How To Fix Breadcrumbs Error In Blogger

    If you do not add Breadcrumbs to your Blogger template. So you will definitely see the error of Breadcrumbs in the search console.
    If you want to fix this error, you can fix the error of Breadcrumbs by following the method given below.

    First Method

    First of all, check whether your blogger template has Breadcrumbs or not.

    If not, you can fix the Breadcrumbs error by following the process mentioned above.
    If the breadcrumbs error is not fixed even after you adopt the first method, then follow the method given below.
    Add Label to Blog Post
    Often we forget to add labels to our blog posts. Which gives us the error of breadcrumbs.
    Because the navigation of Breadcrumbs is according to the label of the post. So you must add labels to every blog post.

    Second Method

    Enable robot.txt by going to your blogger settings. And paste your blog’s robots.txt file
    Change Blogger’s custom robots header settings according to you.
    If you still have an error show of Breadcrumbs, then you must tell us by commenting and we will definitely resolve it

    Leave a comment