How to Add Breadcrumbs Navigation Widget to Blogger (Full Guide)

For wordpress, there are hundreds of plugins and widgets to give a personal touch to your blog. But when you talk about blogspot, it always lacks in plugins. It's the major reason that a lot of bloggers prefer Wordpress to Blogger. No matter, blogspot is one of the CMS platform to blog on and a lot of high-authority blogs are running on it. It has attracted so many newbie bloggers to write a blog and it doesn't cost a single rupee to host your content.

So, Now if your blog don't have a Breadcrumbs Navigation Widget & you want to add it, then there's not direct plugin to add it. Unless you are a geek, you can't install a plugin to your blogspot blog manually.

In this post, I am going to share a tutorial on how to add breadcrumbs navigation widget to blogger. First of all, let me tell you some more about breadcrumbs.

How to ADD Breadcrumbs Navigation Widget to Blogger

What are Breadcrumbs?

Breadcrumbs are nothing but just a set of links that help your visitors to track their position. It helps to know that on which they are and how they came from. Below is a example screenshot.

It usually appears on blog/web header or on the top of content body. Its works like an alternate navigation system and show better snippets on SERP's.

Dont Miss: ADD OPTIMIZED META TAGS TO BLOGGER FOR BETTER SEO

What are the Benefits of Breadcrumbs?

It works like an secondary navigation and interlinks your posts automatically. Breadcrumbs help to improve your blog's user interface and also, shows a stylish snippet on google and other SERP's.


So, Now lets start and implement a clean breadcrumb plugin to your blogspot blog. Steps are so simple to follow and even a newbie can perform it easily.

How to ADD Breadcrumbs Navigation Widget to Blogger

• First of all, Log in to your blogger dashboard and select the blog.
• Now go to Template > Edit Html.

• Now, Click anywhere in the html box and search for the below code snippet. (Press CTRL+F for windows and Command+F for mac).

<b:include data='top' name='status-message'/>

• After finding it, copy-paste the below code just above it.

<b:include data='posts' name='breadcrumb'/>

• After that, Find the below code snippet.

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

• Above this code, Copy-paste the below code snippet.

<b:includable id='breadcrumb' var='posts'>


<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- 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' rel="v:url" property="v:title">Home</a></span>

<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="v:url" property="v:title"><data:label.name/></a></span>

</b:if>

</b:loop>

 » <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == ""'>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

<b:else/>

<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>

</b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

• At last, Click on Save Template. Thats all.

Dont Miss: HOW TO DISABLE COPY FUNCTION ON BLOGGER BY CSS OR JAVASCRIPT

Now visit your blog and check how it looks. After a few days, you can see your changed URL snippets on SERP's.

So, thats enough under how to add breadcrumbs to blogspot blogs. I have shared the simplest tutorial with all of u. Just let me know via comments if you are facing any issue with these breadcrumbs. Happy Blogging.  :)

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post