How To Add Stylish Breadcrumbs Navigation In Blogger Theme – Step by Step Guide

Blogger breadcrumbs navigation are very useful in our blog, It allows users to keep track of their locations within programs, documents, or websites.

If your website has lots of categories and subcategories breadcrumbs navigation is very helpful.

Not only for E-Commerce Site, breadcrumbs navigation are also useful for blogs. Breadcrumbs typically appear horizontally across the top of a Web page, often below title bars or headers.

Breadcrumbs navigation increases your page view as breadcrumb is a type of secondary navigation scheme that reveals the user’s location in a website or Web application.

Breadcrumbs navigation basically improves your internal links for your website. It shows the navigational path of content.

Here is a short video in which Google Engineer Matt Cutt explain the importance of adding breadcrumbs navigation to your blog in a nice and understandable way :

<
Since blogger templates do not contain breadcrumbs navigation features by default so we’ve to add a certain piece of code.

In this article, I’ll try to explain this in very simple and easy steps.

If you have no knowledge of coding just sit tight and follow me:

 

Preview:

 

Step 1: Edit Html

In the blogger admin panel, go to Theme -> Edit HTML

Step 2: Add Blogger Breadcrumbs

 In the Edit HTML, You just have to paste the below code in theme XML, find the… (Ctrl + f)

<div class=’blog-posts hfeed’>

Every blogger themes have this div tag. In the XML template, there are  two div tag or more, you should paste the code below this div tag (See screenshot below)

 

Read also:  Bypassing Internet Restrictions: 10 Techniques that work!

Step 3: Copy and paste this code below that div tag

<!–breadcrumbs start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<p class=’breadcrumbs’>
<span class=’post-labels’>
<a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</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’> &#187;
<a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187; Unlabelled
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
</b:if>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<p class=’breadcrumbs’>
<a expr:href=’data:blog.homepageUrl’>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond=’data:blog.pageType == &quot;archive&quot;’>
<p class=’breadcrumbs’>
<a expr:href=’data:blog.homepageUrl’>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<b:if cond=’data:blog.searchLabel’>
<p class=’breadcrumbs’>
<a expr:href=’data:blog.homepageUrl’>Home</a> &#187; <data:blog.pageName/>
</p>
</b:if>
<!–breadcrumbs end–>

Now you can see that blogger breadcrumbs navigation has been enabled.

Check out your blog to see the result.

Thanks for reading and Please Support us, we inspire to create more. If this article really helped you, do share it with others and help me grow.

Thank You

Leave a Reply

Your email address will not be published. Required fields are marked *