What is a Breadcrumb?
Breadcrumb can be defined as a secondary navigational aid that can provide users an alternative method of navigation that can also reveal a user's location within a Website.
Why use Breadcrumbs?
Breadcrumbs are graphical control elements that greatly increase the usability of a website by:Allowing users to understand where they stand in the hierarchy of a website.
Eliminating additional clicks needed to navigate to a higher-level within a website.
Making it easier to navigate/backtrack to a location in a website.
Building user interest in the website content, thereby lowering the bounce rates.
How to add Breadcrumbs to Blogger Template?
Step 1: Navigate to your Blogger Template Editor.Step 2: Find <div class="blog-posts hfeed"> using Ctrl+F.
Step 3: You may find it in 2 places. Replace those with the following code:
<div class="blog-posts hfeed">You are almost done.
<!--start: breadcrumbs -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs' title='Posts Breadcrumbs'>
<span class='post-labels'>
<a target="_self" expr:href='data:blog.homepageUrl' rel='tag'><data:blog.title/></a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == true'> ➜
<a target="_self" expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
➜ Uncategorized
</b:if>
➜ <span><data:post.title/></span>
</b:loop>
</span>
</p>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<p title='Pages Breadcrumbs' class='breadcrumbs'>
<a target="_self" expr:href='data:blog.homepageUrl'><data:blog.title/></a> ➜<data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<p title='Archive Breadcrumbs' class='breadcrumbs'>
<a target="_self" expr:href='data:blog.homepageUrl'><data:blog.title/></a> ➜ <data:blog.pageName/>
</p>
</b:if>
<b:if cond='data:blog.searchLabel'>
<p title='Search Breadcrumbs' class='breadcrumbs'>
<a target="_self" expr:href='data:blog.homepageUrl'><data:blog.title/></a> ➜ <data:blog.pageName/>
</p>
</b:if>
<!--end: breadcrumbs -->
Step 4: Save the Template and close it.
Step 5: Open your Post Editor.
Step 6: Find the Labels text field On the Sidebar.
Step 7: Enter the appropriate Label and press 'Done'.
Step 8: Update the post, Press the 'Update' button.
Step 9: View the Blog Post. Find your Breadcrumb. You are done!