How to Add Breadcrumbs Navigation in Blogger

Advertisements

1. Go to Blogger >>Theme >> Edit HTML

2. Click anywhere in the HTML codes and Press Ctrl+F   

3. Now search for <div class='blog-posts hfeed'> code line

4. Paste below codes just after the <div class='blog-posts hfeed'> code line

<b:if cond='data:blog.homepageUrl != data:blog.url'><div class='bcm'>

<div style='display: inline;' typeof='BreadcrumbList' vocab='http://schema.org/'>

<div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a href='/' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'>Home</span></a>

<meta content='1' itemprop='position'/></div><b:if cond='data:blog.pageType == &quot;item&quot;'><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 == &quot;true&quot;'><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:label.url' id='buttonboxback' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'><span itemprop='name'><data:label.name/></span></a> <meta content='2' itemprop='position'/></div></b:if></b:loop></b:if></b:loop></b:if><div itemprop='itemListElement' itemscope='' itemtype='http://schema.org/ListItem' style='display: inline;'><a expr:href='data:blog.url' itemprop='item' itemscope='' itemtype='http://schema.org/Thing'/><span id='buttonboxback1' itemprop='name'>&#160;&#160;<data:blog.pageName/></span> <meta content='3' itemprop='position'/></div></div></div><br/></b:if>

5. Search for ]]></b:skin> and paste below CSS codes just before ]]></b:skin>

#buttonboxback {display:inline;background-color: #1E90FF; padding:5px;padding-left:8px;width:120px;height: 30px;position: relative;border-radius: 5px;text-align: center;color: #fff;font: bold 14px/30px Sans-Serif;text-decoration: none;}#buttonboxback:hover {background-color: #0081ff;}#buttonboxback:after {z-index:1;content: "";position: absolute;top: 0;right: -11px;border-style: solid;border-width: 13px 13px 13px 0px;border-color: transparent #1E90FF transparent transparent  ; transform: rotate(-180deg);}#buttonboxback:hover:after {border-right-color:#0081ff;}#buttonboxback1 {display:inline;background-color: #fff; padding:5px;width:120px;height: 30px;position: relative;border-radius: 5px;text-align: center;color: #000;font: normal 14px/30px Sans-Serif;text-decoration: none;}

6. Click to save theme. Now You have successfully Added Breadcrumb Navigation in blogger

7. Now remove status message in your blogspot Template

8. Search for the following code inside HTML template

<b:includable id='status-message'>

Click the highlighted Arrow

You will find Code like Below

Remove the Below code

<b:includable id='status-message'>
      <b:if cond='data:navMessage'>
      <div class='status-msg-wrap'>
        <div class='status-msg-body'>
          <data:navMessage/>
        </div>
        <div class='status-msg-border'>
          <div class='status-msg-bg'>
            <div class='status-msg-hidden'><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style='clear: both;'/>
      </b:if>
    </b:includable>

Now Replace the above Code with below code

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Now Click to Save the theme.