Add Breadcrumbs to Blogger / Blogspot blogs

Breadcrumbs or breadcrumb navigation on a website or blog helps users to navigate the content in a broader way, and they are on the site. For example, if you’ve published a post under the category “Parent” in the sub-category “Child”, the breadcrumb would be something like this:

Home > Parent > Child

A breadcrumb navigation on a site is generally placed above the content telling the readers the location of the content. With such a navigation, users can also browse under those categories and sub-categories for more content. Therefore, a breadcrumb navigation is necessary for more exposure of your content on web to your visitors.

In this article, we’ll learn how to add breadcrumbs to Blogger or blogspot blogs.

Adding Breadcrumbs to Blogger / Blogspot blogs

Before proceeding towards adding breadcrumbs to your blogger blog, make sure you created a backup of your Blogger template. Afterwards, follow below given steps one-by-one to add breadcrumbs to your blog. W3Bits’ Advanced Breadcrumbs for Blogger allows you to choose custom separator and control full post name display in the breadcrumb.

Advanced Breadcrumbs for Blogger

1. You can enter a Custom separator for your breadcrumbs. (In Home » Category, the red highlighted section is separator). If you won’t use a custom separator, the default separator: » will be used.

2. Check this if you want to show Post Title on Post pages (i.e. Home » Category » My Blog post title here)

3. Now, edit your blog’s template, by going to Design » Edit HTML in old Blogger and Template » Edit HTML in new Blogger layout. Check ‘Expand Widget Templates’ checkbox. Now, find <b:includable id='main' var='top'> in your Template. Look for this piece of code below it: <b:include data='top' name='status-message'/> Replace it with: <b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/> Now replace <b:includable id='main' var='top'> with the below code:

4. Final step, find ]]></b:skin>, replace it with the below code and click Save Template button:

A W3Bits Tool

Now open your blog, view a post or a page to test the Breadcrumbs appearing correct or not.

You can see a working example here: woofun.blogspot.in. Please let me know if you find some problem with the code or while setting it up with your blogger.