How To install Breadcrumb In Blogger Blog

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.

Post a Comment

Lebih baru Lebih lama

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel