How To Add Breadcrumbs in Blogger Template


How To Add Breadcrumbs in Blogger Template
How To Add Breadcrumbs in Blogger Template

 

If your current theme/template does not have breadcrumbs compatibility then you will face problems. Either you need to edit your theme and insert that code or you need to change your blogger theme to a replacement updated theme that has breadcrumbs compatibility. For new bloggers with few coding knowledge, the primary option is sort of hard therefore the second option which is to select a replacement breadcrumbs ready theme is sort of easy.



Breadcrumb errors may be a new error in 2020 and immediately it's harder to seek out a free theme that's breadcrumb compatible. So I searched for it and I found that one best theme which is super awesome and of course it is free. So now you'll use this breadcrumb compatible theme in your blogger website then you'll easily resolve your breadcrumb error which is shown in your site.



Maybe after some days all of the favored blogger themes will bring updates with breadcrumb compatibility, till then use this blogger theme and boost your search results like a rocket. Many of the bloggers are still trying to find an answer, so it is that the right time to beat the competition with this super-fast blogger template I suggest because this blog is running on the precise same template.
How to Fix Breadcrumbs error in 1 minute. 


Step 1: Edit Html

In the Blogger Dashboard , Go to Template >> Edit Html
How To Add Breadcrumbs in Blogger Template
Add Breadcrumbs in Blogger Template

Step 2:  Add the breadcrumbs code

  •  Press Shift+F and search for the code  <div class='post-header'>


  • Paste the below code just above it as shown in the image.

CODE

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
    <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <brc>/</brc>   
      <b:if cond='data:post.labels'>
      <b:loop values='data:post.labels' var='label'>
        
           <b:if cond='data:label.isLast == &quot;true&quot;'>
<span typeof='v:Breadcrumb'>
                                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a></span>
                                  </b:if>
      </b:loop>
      <b:else/>
         Unlabelled
      </b:if>
      <brc>/</brc> <span><data:post.title/></span>
  </div>


CSS
Now let’s add the styling and important part of the widget, Search for ]]></b:skin>  and just below it paste the following coding


.breadcrumbs{
    margin:0;
    font-size:13px;
     padding: 5px;
     box-sizing: border-box;
     background: #f2f2f2;
     border-radius: 2px;
}
 .breadcrumbs span a.bhome{
    color:red
}
 .breadcrumbs span,.breadcrumbs span a{
    color:#010101
}
 .breadcrumbs span a:hover{
    color:red
}

Now just save the theme and you are done. Congrats !! The Blogger breadcrumbs have been enabled on your blog. Please comment below if you like the post or you have any queries.

Copyright © YoYoTechTips
Newer Posts Older Posts

Related posts