How to add a simple Breadcrumbs navigation in your blogger blog?

Breadcrumbs are one way that you can use to navigate your blogger blog easily. 

Breadcrumbs help readers to navigate your blog post and let them to easily surf through your blogger post pages. Breadcrumbs show navigation of your blogger from your homepage to the current blogger post page. Breadcrumbs navigation displays your blogger Homepage, post labels or categories as well as your blog post title. 

Not only navigate also Breadcrumbs with Markup will help to improve your blog site snippet in Google. So Breadcrumbs is a very useful widget for our blog like breaking news bar, related post widget, recent post widget and back to top button widgets those we discuss in previous posts.

What is Breadcrumbs?

Breadcrumbs are a navigation element used to show the location of the current page with respect to the blogger home page. Breadcrumbs allow your readers to keep track of the location of your current blog post on your blog site. It displays links from homepage, labels or categories to your blog post title. If your blogger has a lot of categories with subcategories Breadcrumbs will be very helpful. Its appear horizontally across the top of a blog post page above the post title.

Let take an example,

If you are publishing a post, your Breadcrumbs look like this;

Home page > Label/category of page > Sub Label/sub category of page > Sub Label/sub category of page > your post title

Benefits of adding Breadcrumbs in your blogger blog

·         Help to navigate your site

·         Help to easily identify your post page locations, its categories

·         Increase your blog page views

·         Improve your site’s internal links

·         Improve your site SEO

·         Improve your site snippet in google

·         Reduce your bounce rate

·         Easy to track back to related category or homepage

Most of the time Breadcrumbs not available in blogger template so we need to add it into our blog site. also if you interest to edit your current Breadcrumbs this article may be useful for you. Let see,

How to add simple looking Breadcrumbs navigation in your blogger?

Step 01: Sign in to Blogger blog

Step 02: Go to Dashboard >> Template>> click HTML button

Step 03: Now find <data:post.body/>  (if not find <div class='blog-posts hfeed'> )

Step 04: Copy below code and paste above the <data:post.body/> code (Or below <div class='blog-posts hfeed'> [if there are two code place below first code]).

*If you like to edit your current Breadcrumbs, then find <div class='breadcrumbs'> or <div class=' breadcrumb '> and replace your current breadcrumb code with below code. 

<div class='breadcrumbs'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a class='homex' expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

»

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:label.url' itemprop='url' rel='tag'><span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != "true"'> » </b:if>

</b:loop>

<b:else/>

»Unlabelled

</b:if>

</b:loop>

 </div>

*If above code not working or you want to add page title to Breadcrumbs, then replace above code with below code. 

<nav id='breadcrumb'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>

<span itemprop='title'>Home</span></a>&#187;

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<span typeof='v:breadcrumb'>

<a expr:href='data:label.url' itemprop='url' property='v:title' rel='v:url' title='Categories'>

<span itemprop='title'><data:label.name/></span></a></span>

<b:if cond='data:label.isLast != &quot;true&quot;'>&gt;

</b:if></b:loop></b:if>

&#187;

<a expr:href='data:post.url' itemprop='url' title='Post Title'>

<span itemprop='title'>

<data:post.title/>

</span></a></div></div></b:if></nav>

Step 05: Now find  ]]></b:skin>  and copy and paste below code before or above ]]></b:skin>  code.

. breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:90%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

font-weight:bold;

}

Step 06: Save your template

 OK. Now Breadcrumbs has enabled in your blogger blog. Check it and see the results.

That will help your readers to navigate your blog posts and its locations. Not that it will also help you to increase blogger SEO. 

I Hope the above 17 tips help you to add a simple Breadcrumbs navigation in your blogger blog. And if you have any problem or know more fixes on this simple Breadcrumbs navigation for blogger blog, Please share with us in the comments section below. Happy blogging!