Breadcrumbs in Notable Blogger theme

The modern themes available in Blogger are suitable for mobile devices; this is important in terms of indexing but Blogger not support breadcrumb of schema.org by default. If you add a few lines of code you can greatly improve your SEO and therefore your ranking in Google Search. I create a personal breadcrumb solution; if you have installed a responsive theme like mine in this article I explain how to add Breadcrumbs in Notable Blogger theme.

How to add breadcrumbs in Notable Blogger theme

First thing create a backup of you theme for security reasons You can add breadcrumbs in JSON-LD format or as following micro-data solution:

1. Open your Blogger Dashboard
2. Click on Theme >> Download a Backup for security reason
3. Copy this code <div class='post-body-container'> 
4. Click Ctr+F and past the copied code then click Enter

You will find this tag 1 time.

Breadcrumbs in Notable Blogger theme

Now copy the following code and past it below the tag :

<b:if cond='data:view.isPost'>

  <b:loop values='data:posts' var='post'>

    <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>

      <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

        <a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'>

          <meta content='1' itemprop='position' />

          <span itemprop='name'>Home</span>

        </a>

      </span>

      <b:if cond='data:post.labels'>

        <b:loop index='num' values='data:post.labels' var='label'> &amp;nbsp;&#8250;&amp;nbsp;

          <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

            <meta expr:content='data:num+2' itemprop='position' />

            <a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>

              <span itemprop='name'>

                <data:label.name />

              </span>

            </a>

          </span>

        </b:loop>

        <b:else />

        &amp;nbsp;&#8250;&amp;nbsp; There are no categories

      </b:if>

    </div>

  </b:loop>

</b:if>>

Breadcrumbs function

This function insert a loop inside the post loop; get the data from the label and insert html response with item-type and item-scope micro-data property and value. Now open your Google search console account and test breadcrumbs in your post.

Stylize Breadcrumb

If you want stylize breadcrumb link; inside the   <b:skin tag in the head section create .breadcrumb CSS class Property. Usually :

.breadcrumb {

  width: 100%;

  margin: 10px auto;

  float: left;

  clear: both;

  font-size: 0.8rem;

}

That all! Click on the Save button and Enjoy.