How to Add BreadCrumb on Blogger/BlogSpot in HTML

By
Advertisement
How to Add BreadCrumb on Blogger BlogSpot in HTML - Adding breadcrumb in blogger is of a high value to the blog. It helps users or visitor to navigate around the blog properly. In the recent days, all SEO optimized blogger template comes pre-loaded with breadcrumbs in their template html.



It's also good to add breadcrumb on WordPress blogs especially if the blog has many categories. As you have noticed, many E-commerce blogs has this feature to guide a buyer around the blog without missing any link.


Today, I will guide you on how to add breadcrumb on blogger blogs. Breadcrumbs increase pageviews and reduces bounce rate on a blog. Breadcrumb increase internal linking for On-Page SEO. It enriches your post wth proper keywords - helping all search engine bots to pick your post and add it on 1st page. So, are you ready to add the navigation label links above your post title?

How to Add BreadCrumb on Blogger HTML

Below is a detailed step by step guide on how to add breadcrumb navigation on your blog;

1. Go to Blogger > Template > Edit HTML
2. Remember to ackup your template before doing this.
3. Then search ]]></b:skin>
4. And paste this code just above ]]></b:skin>

.breadcrumbs {padding:3px 0px 8px 5px; margin: 0px 0px 5px 5px; font-size:90%; line-height: 1.4em;}
5. And then we apply breadcrumbs to blog, search this code.


<b:includable id='main' var='top'>

6. Replace that code with this code below.



<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

7. Save your template and view your blog on a fresh page. Open a single post and you will the the awesome blogger breadcrumb showing there.


Kindly share this post to others. They may be in need of stuff like this. Also remember to drop your email address in the box blelow.

If you have any question or suggestion, feel free to use the comment box below. Have a nice day!


Tags: how to add breadcrumb in wordpress add breadcrumb in magento drupal add breadcrumb how to add breadcrumb in html breadcrumb blogspot breadcrumbs for blogger show breadcrumbs wordpress how to display breadcrumbs in wordpress enable breadcrumbs in wordpress get breadcrumbs wordpress how to make breadcrumbs in wordpress how to use breadcrumb in wordpress wp breadcrumbs yoast_breadcrumb

0 comments:

Post a Comment

Thanks foor reading this post. Kindly share to others on Facebook, Twitter and Google-Plus.

Use the comment box below to drop your thoughts and suggestions. Have a nice day!