Latest News
Home » All Blogger Tips » How to add breadcrumbs to blogger?
web development, SEO services, Web designing

How to add breadcrumbs to blogger?

How to add breadcrumbs to blogger?

In previous post of mine I had discussed how to make your titles SEO friendly. Now next step for making your website more SEO friendly is adding breadcrumbs to your blog. Now, some of you may not know that what is breadcrumbs, so first let me tell you what it is actually.

Breadcrumbs are navigation trailer that tells the visitors about their location on the page. Like if you have opened this post of mine you may see above the title of my post, Home>>label name>>Post name.
This is breadcrumbs. It is like a path telling line. Its tells you your location.
Read this: Transfer blogger to wordpress
You can see image below for more clarification.
add breadcrumbs to blogger

This makes your website more seo friendly. So, lets now discuss steps to add this to your blogger website.

Here are the steps:

How to add breadcrumbs to blogger?

  • Back up your template first.
  • Go to blogger dashboard >> Edit HTML
  • Click on expand widget or format widget which option is available.
  • After that with help of ctrl+F find the code below:
<b:include data='top' name='status-message'/>
You can get two of this codes try with first one it is mostly right, but if not works then try second as well.
  • Now when you got that just below it  add this code:
<b:include data=’posts’ name=’breadcrumb’/>
  • Then Find the below code :
<b:includable id=’main’ var=’top’>
  • Just above it add this code:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<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"'> »
<a expr:href='data:label.url' rel='tag'><></a>
» <span><data:post.title/></span>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
  • Now find this code: ]]></b:skin>
And above/before it add below code:
/* Breadcrumbs by */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
  • Just click on save template now and you are done.
Now you are done with and have added breadcrumbs to your blog.

Your Turn

Now if you have any problem or queries do comment. Also comment if it worked for you 😀

Originally posted 2013-07-18 21:28:00.

About Vishal Sharma

Hi`i' m +Vishal, a Search Engine optimizer, internet marketer, web designer, affiliate marketer & founder of this blog. I love to learn and share new things. For any query or help you can contact me at any time.


  1. Really A Nice One Post U R Doing Great Job Bro Keep It Up

  2. You provide great tips. Keep the good work going.

  3. Nice tutorial brother, but breadcrumbs are not good in view of SEO.

  4. Thanks Gagan for arriving here 😀

    But I want to tell you that Breadcrumbs are good for SEO, they help a lot in this term 🙂
    You can search more about it 😀

  5. Thanks Bushra for your appreciation 😀

    keep in touch with my blog 😀

Leave a Reply

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


This site uses Akismet to reduce spam. Learn how your comment data is processed.