HOT!Buy Ready-Made Authority WebsitesClick Here

Making Blogger Professional, Important Updates !!

Hello SoraBloggingTips Readers, If you are reading this, then we would like to appreciate your efforts for being supportive. We know its har...

How To install Breadcrumb In Blogger Blog



Breadcrumb is an important part of blogger blog, First it helps in easy navigation and then it also helps in case of SEO. this widget is very clean and easy to use, comes in very minimal state with elegant appearance it enhance your blog looks. The benefit of this breadcrumb widget is that it shows only one label in between, in terms of seo google shows only one label in the search results, So we have maintained it in a same way, We have managed the number of labels displayed on Breadcrumbs is only one. No matter how many labels are added to each blog post, still only one label will appear on the breadcrumbs. You can check the demo just above title of this post.

How to install This widget:-

These  steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.
Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Don’t forget to Click/Tick the Expand Template Widgets box.
Search for <div class='post-header'> and just below it paste the following  CSS 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>
Now let’s add the styling and important part of the widget, Search for ]]></b:skin>  and just below/after 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 }
All Done : Now everything is completed just  Save your Template by pressing Save template button.
Note: You can change the text and buttons accordingly.
How To install Breadcrumb In Blogger Blog How To install Breadcrumb In Blogger Blog Reviewed by TemplatesYard on January 10, 2020 Rating: 5

12 comments:

  1. didnt work..it was displaying just the codes on the top of the page

    ReplyDelete
  2. How to remove breadcrumbs for sora templates?

    ReplyDelete
    Replies
    1. Sorry we can't provide support on additional customization(Adding or Removing stuffs) rather than solving issues or bugs, if you want to customize your template then buy our blog customization service.

      Delete
  3. not working site www.bhartiyacoupons.in

    ReplyDelete
  4. i have added breadcrumbs successfully but codes are appearing on the top of my page and also, where i to make changes in codes????

    ReplyDelete
  5. i have added breadcrumbs successfully but codes are appearing on the top of my page and also, where i to make changes in codes????

    https://www.lookarounds.com/

    ReplyDelete
  6. I did not find the code div class='post-header'
    www.wiki-informations.com

    ReplyDelete

Note : -We have stopped giving support to free version users, please read this article Making Blogger Professional, Important Updates !!. If You Are Facing Any Problem While Setting Up The Free Theme, Then We Recommend You To Read Our FAQ(Frequently Asked Question) Page.