Skip to main content

Add Latest Version of Schema Breadcrumbs Markup in New Blogger Themes

In this post, I will explain how to correctly add the latest version of Schema Breadcrumbs in New Blogger Themes – Contempo, Soho, Emporio, Notable, and Essential, which will correctly validate in Google Structured Data Testing Tool and remove all errors appearing in the Search Console.
The method of adding Schema Breadcrumbs Markup in Blogger Posts and Pages is given below: The Breadcrumbs Trail will appear properly on screens of all resolutions, including Mobile, Tablets, Laptops, and Desktops. 

First Step:
Add - <b:include data='posts' name='breadcrumb'/>  in the template like this -

<b:includable id='main'>
<b:include name='noContentPlaceholder'/>
<b:include data='posts' name='breadcrumb'/>
<b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>

See the reference image given below:


Second Step:
Add the Schema Breadcrumbs Code given below above  -  <b:includable id='commentAuthorAvatar'> See the refrence image given below the code. 

<b:includable id='breadcrumb' var='posts'><b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Home<b:default/>Home</b:switch></span></a> </span> <b:if cond='data:post.labels'> <b:loop index='nomor' 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:nomor+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; <span itemprop='name'><data:blog.pageName/></span> </b:if> </div> </b:loop><b:elseif cond='data:view.isPage'/> <div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'> <meta content='1' itemprop='position'/> <span itemprop='name'><b:switch var='data:blog.locale'><b:case value='id'/>Home<b:default/>Home</b:switch></span></a> </span> &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:blog.url' expr:title='data:post.url' itemprop='item'> <span itemprop='name'><data:blog.pageName/></span> </a> </span> </div></b:if> </b:includable>


Third Step:
Add the CSS Code given below above -

]]></b:skin>

.breadcrumbs { padding-top: 20px; padding-bottom: 0px; margin-left: 0px; padding-left: 40px; padding-right: 20px;font-size:90%; color: #000000; background: white;}.breadcrumbs a {color: #f3212d;}@media screen and (max-width:800px) {.breadcrumbs { margin-left: 0px; padding-left: 20px; padding-bottom: 10px; padding-right: 20px; color: inherit;font-size:90%;}}.breadcrumbs a:hover { color: #ea9999;}

You can change the colors and the font size as per your choice.

The Script given above is the latest version of the Breadcrumbs Trail for Blogger Blogs, which appears correctly on the New Themes released by Blogger and a few years back and other HTML5 Blogger Themes

Comments

Popular posts from this blog

Symbol of the Indian Rupee

Udaya Kumar, a post graduate in Design from Indian Institute of Technology Bombay has designed the symbol of the Indian Rupee. This symbol has come into effect from 15th July, 2010. 
The symbol is an amalgam of Devanagari "Ra" and the Roman Capital "R" with two parallel horizontal stripes running at the top representing the national flag and also the "equal to" sign.

Hide Top Aside Sidebar and Change Bg Photo Color in Contempo Blogger Themes

In this post, I will explain How to customize the Contempo Blogger themes by removing or change the color of the .bg-photo background, hide top-aside-sidebar and increase or decrease the text font size in aside-sidebar gadgets by using the Blogger Theme Designer.

National tree of India

Indian fig tree or the Banyan is the national tree of India

National sport of India

Field hockey is the national sport and game of India. Here is an image I have created by merging two images.

Vande Mataram Image

Vande Mataram is the national song of India.Here is an image which I have prepared.

Related articlesWhat does Republic Day mean to you ? (prophet666.com)