5 Secrets of Blogger (Service) You Don't Know

Recent Posts

How to Add Breadcrumb With Structured Data in Blogger

Learn how to add breadcrumb navigation in Blogger with Structured Data.


Breadcrumbs navigation widget for Blogger will make your website more user friendly and search compatibility.
 
Learn how to add Breadcrumb in Blogger
Add Breadcrumb to Blogger
Adding Breadcrumb Structured Data or Schema Markup will help your Blog to Search Engine as effective to show breadcrumb instead of Full URL.
Breadcrumb Structured Data

To add breadcrumb navigation bar in Blogger, apply the following steps:

1. Go to Blogger and select your blog and choose 'Template → Edit HTML'
2. Click a single on template code and 'CTRL + F' and search for
<b:include data='top' name='status-message'/> and put the following code just before.

Just below paste the following code
<!--breadcrumbs start
Breadcrumb with Schema Markup by
http://www.compromath.com
License: Free to use
-->
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
      You are here: <span class='homex' typeof='v:Breadcrumb'>
        
        <a expr:href='data:blog.homepageUrl property='v:title' rel='v:url'> Home</a></span>
<span class='post-labels'><a href="http://www.compromath.com/2017/02/add-breadcrumb-navigation-bar-in-blogger-template.html" style="display:none;></a>
        <b:loop values='data:posts' var='post'>
            <b:if cond='data:post.labels'>
            <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == true'> »
                   <span class='breadlabel' typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
                </b:if>
            </b:loop>
            <b:else/>
            » Unlabelled
            </b:if>
            » <span class='breadlabel'><data:post.title/></span>
        </b:loop>
        </span>
    </div>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='breadcrumbs'>
  <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<b:if cond='data:blog.searchLabel'>
    <p class='breadcrumbs'>
      <a expr:href='data:blog.homepageUrl'>Home</a> » <data:blog.pageName/>
    </p>
</b:if>
<!--breadcrumbs end-->
*** If you don't get  <b:include data='top' name='status-message'/>, again search for
<div class='blog-posts h-feed'>  or
<div class='blog-posts hfeed'>  and put your code just below those.

Add the following CSS just before ]]></b:skin>

.breadcrumbs {
    border: 1px solid black;
    background: #fff;
    margin-top: 2%;
}

.breadcrumbs a {
    color: #b93434;
    text-decoration: none;
}

.breadcrumbs a:hover{} 

You can customize CSS with your expectation.

Recommended article:  Adding Specific Code Syntax Highlighter For Blogger.
Have got this article helpful or not working? Put your comment below.