Skip to main content

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

Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

CMS Content Management System

Anyone who wishes to construct and administer a website without knowing how to code should consider using content management systems (CMS). A content management system (CMS) is a piece of software that makes it simple to add and alter material to websites without changing the underlying code.  Because of this, CMSs are a fantastic option for organizations and people who lack the technical know-how to build a website from scratch.  CMS  How many types of CMS exist? There are several available CMSs, each with unique benefits and drawbacks. The most well-liked CMSs include: WordPress Drupal  Joomla  Magento  Shopify  TYPO3 Picking the CMS that best meets your needs is vital since each one has unique features and functions. Gins that are offered. If You learn PHP, Javascript, HTML and CSS programming language You can create Your personal CMS. Who can use a CMS?  Anyone who wants to build and administer a website without knowing how to code will find C...
Post a Comment
Read more

How to insert JavaScript into web pages

You have learned everything there is to know about HTML and CSS to start building your static website and now you would like to make it dynamic but you don't know how to insert JavaScript into web pages; right? Don't worry! Inserting the scripts into html files is really a breeze. If you read this article, in the next five minutes you will discover all the methods for inserting JavaScript into html files. How to insert JavaScript into HTML file JavaScript need HTML file to work.  Like CSS all methods of inserting JavaScript into a Web Page can be divided into two sections; add the scripts inside the TAG of  HTML file or by calling them externally. In detail we can insert JavaScript: Directly into Body of the HTML file. In the Head Tag and recall it in the body. With a relative or absolute external reference. Insert JavaScript into HTML file We will see an example of how to insert JavaScript shortly but first let's focus on when it is useful to do an explicit or implicit ...
Post a Comment
Read more

Introduction to HTML language

If you've decided to learn how to build websites from scratch, you'll find this introduction to HTML particularly interesting. HTML acronym for (Hyper Text Markup Language); is the standard that defines the structure of the hypertext language for the creation of  Web pages. Structure of an HTML file The creation of an HTML file is done through markers and tags; the first, structure the Web page for the Browser, the Tags are the containers of what is visible on the screen by the user. In practice, the Tags outline the content of a page. Introduction to HTML language If  You don't use a CMS (a program that allows you to do this without writing HTML code) for create a Web page, requires that you have assimilated the syntax of the HTML language. An HTML file has the opening and closing markers; this latter differs from a forward slash (/) in front of it; translated into English (Forwardslash) and which we will see shortly.  In addition to what has just been said, there are so...
Post a Comment
Read more