How To install Breadcrumb In Blogger Blog - Easy Steps
Breadcrumbs are an important part of Blogger blog, first, it helps in easy navigation and then also in case of SEO. This widget is very clean and easy to use, comes in very beautiful condition, it makes your blog better.
The advantage of this breadcrumb widget is that it shows only one label in the middle, SEO shows only one label in Google's search results, so we maintained it the same way, we managed the number of labels displayed on breadcrumb only. Is one. There is no problem with how many labels are added to each blog post, only one label will appear on the breadcrumbs.
How to install this widget: -
These steps are so simple and easy that no new blogger will have to face any kind of problem to install it in their blog.
- You Go to Blogger.com >> Your Blog >> Template
- Now backup your template.
- Then click on Edit HTML >> Proceed
- Expand Widget Do not click/tick the widget box.
- Search for <div class = 'post-header'> and paste the following CSS code just below it.
<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 == "true"'><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 edit the styling and important part of the widget, Search for ]]></b: skin> and just below/after it pastes 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
}
0 Comments