How To Add Breadcrumbs in Blogger Blog.


Blogger breadcrumbs is extremely helpful in our blog, it’s terribly useful to the users it shows wherever the users navigate within the blog or web site, particularly in e-commerce web site, if your e-commerce web site has lots of categories and sub categories breadcrumbs is extremely useful, not just for e-commerce, breadcrumbs additionally helpful for blog.


The benefits of adding breadcrumbs in blog, it increases your blog Pages Views, it improves your internal links for your web site. Breadcrumbs is one among internal linking SEO strategy also categories, latest post, archives, connected post, thus positively you add these parts.


Blogger breadcrumbs isn't on the market in blogger admin panel at now perhaps within the future, thus we want to add a piece of code in your journal model, simply follow the instruction

Step 1: Edit Html


From the blogger dashboard, go to Template >> Edit HTML
Step 2: Add Blogger Breadcrumbs


In the Edit HTML, you’ll need to find the following the code by pressing (Ctrl + f).

<div class='blog-posts hfeed'>

How To Add Breadcrumbs in Blogger template


All blogger templates have this div tag, in the xml template there have 2 this div tag or more, you should Copy and paste this following code below that above div code.



<!--breadcrumbs start with blogs nucleus-->

<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 with blogs nucleus-->

Now save your blogger template. The blogger breadcrumbs has enable in your blog. Thanks for staying with us, if you like please recommend and share.

16 comments:

  1. Through this post now i am clear about breadcrumb

    ReplyDelete
  2. Thank for your tutorial. I look simple but when I'am doing I feel its so hard

    ReplyDelete
  3. thanks for sharing, i ran a blog at blogspot but it was not a good experience because i didn't knew much about blogspot configurations Doctor Adil Mirza

    ReplyDelete
  4. It works I have been trying on my blog with other blog post but yours works thanks

    ReplyDelete
  5. The benefits of adding breadcrumbs in blog, it increases your blog Pages Views, it improves your internal links for your web site.

    ReplyDelete
  6. I cannot find div class='blog-posts hfeed' in Emporio template. Could you help me out?

    ReplyDelete
  7. I still remember breadcrumbs way back in the 90s. Almost totally forgot about them until now. Thinking about it now, using breadcrumbs makes total sense for SEO.

    ReplyDelete
  8. thnx man,i am using it here if you wanna check it out.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld