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

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 © YOYO TECH TIPS

HEY! I'M S.M. ZUBAIR, THE PERSON BEHIND YOYOTECHTIPS.

Welcome to YoyoTechTips. I hope you have enjoyed this article. 🚀 Dive into a world ofBlogging Tutorials, Cutting-edge Tech Updates, Online Earning Hacks, Web Development Insights, Educational Article, SEO Secrets, and all kind of Internet Technology tricks are shared on our website. Read more About Us. Join Our Community and submit your articles. Subscribe to Newsletter and Download Our android app. Stay with us...
Stick around for the latest updates and don't forget to show some love by liking our Facebook page! ❤️

Newer Posts Older Posts