Create Breadcrumbs in Blogger

BreadCrumb is a small text path to the current page, located at the top of a page indicating where the user is on the site. BreadCrumb is a kind of navigation menu, that appears in Google search results.

Ex.
home > blogger topic > title

Unfortunately, there is no gadget available in Google Blogger to create breadcrumb. But there are so many tutorials to install a breadcrumb or to modify the template on Blogspot. Most of Blogger has installed Breadcrumbs on their Blog, all based on Label.

Here I am going to show how to create your own breadcrumb on your blogger using labels.

1. Go to Theme
2. Click Edit HTML

Now in the HTML find the <div class='blog-posts hfeed'> </div> This element is the top of the page

Copy and paste the below code inside the hfeed element <b:if cond='data:blog.pageName and data:blog.pageType != &quot;static_page&quot;'> <div class='breadcrumbs'> <a href='https://manimuthupandi.blogspot.com/' title='Home'>Home</a> > <b:if cond='data:blog.pageName and data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:loop> </b:loop> </b:if> > <data:blog.pageName/> </div> </b:if>
you can also add the CSS style for your breadcrumb. Here I have added simple style. You can give background color
.breadcrumbs{ padding-bottom: 5px; }
Explanation of the breadcrumb code

1. I have added my Home page link as the first level for breadcrumb <a href='https://manimuthupandi.blogspot.com/' title='Home'>Home</a> >
2. Second level for breadcrumb is the Label name of the current page. This boolean condition used to check whether there is a page name and page type is equal to the item. <b:if cond='data:blog.pageName and data:blog.pageType == &quot;item&quot;'> Then looping through eash post. Here post contains only one data. So loop will run one time. Again one loop to get the label of the given post <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:loop> </b:loop> This way Label link is created in breadcrumb for second level.

3. Third level of link is current post title, we can show the current post title as <data:blog.pageName/>
Check our blog posts, there you can see the breadcrumb, which is generated using this steps