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:

Comments

Post a Comment

Popular posts from this blog

Learn to use the computer

Many people use the PC every day to connect to the network and to work but without knowing what the computer is and wondering how this is possible. We put a computer to work every time we buy with a credit card, withdraw from an ATM, pay a postal order, buy a train ticket, play video games and many other things. Understanding how the PC works inside is too much but starting from its components and the origins of  IT is already a good start. Learn to use the computer Basic computer components The computer is made up of several electronic components on printed circuits that interact with each other via micro pulses; if you want to learn how to use the computer, the main components of a PC are: A central processing unit (CPU); the "processor" used to process active processes on the data before outgoing transmission. RAM memories (random access memory) in which the bytes for processing are loaded; it is the dynamic memory of the computer and it is volatile; A graphics processing...
Post a Comment
Read more

Introduction to the JavaScript language

In this introduction to the JavaScript language we discover one of the programming languages that has changed the concept of understanding the Web. The added value of JavaScript to the HTML code is to make the Web page dynamic in its interactions with the user. JavaScript is a client-side web programming language. Web 2.0 was born with the JavaScript language. The advantages of the JavaScript JavaScript or "JS" in its abbreviated form; is the most widely used client-side scripting language on the web. The advantage of the JavaScript is that it can be interpreted by almost all browsers; while what has allowed a strong expansion is the availability of many frameworks and libraries that can be easily integrated into scripts. The language is unique in its kind for data exchange thanks to the asynchronous AJAX (Asynchronous JavaScript and XML) functions that allow you to interact with users without reloading web pages and to exchange data in JSON (JavaScript Object Notation) for...
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