How To Add Breadcrumbs In Blogger Blogs

Breadcrumbs are a kind of navigational client for a blog/site. It helps readers to understand topics related to which category they’re reading. This also helps readers to search and read articles on similar categories.In most sites, breadcrumbs can be seen as a horizontal bar above the post title, and contains links to categories and tags related to the posts that the reader is currently on.If you own a blog hosted under Google Blogger, and if you would like to add breadcrumbs to your blog, then we’re here today with a simple guide on how to install or add breadcrumbs in blogger blog.

Using Breadcrumbs in a blog, has many SEO benefits. The main advantage being that, adding breadcrumbs to your blog will add rich keywords phrases and titles to the link structure of your blog.

Breadcrumbs In Blogger

However, the main disadvantage of adding breadcrumbs on your blog is that, it alters the link structure of your blog post, hence removing any keywords that you added to the permalink of your blog post.

How To Add Breadcrumbs In Blogger Blog

Adding breadcrumbs to a blogger blog is an easy task, if you do it the right way. And below is how you can add breadcrumbs on to your blogger blog, the right way:

  • First of all, navigate to www.blogger.com and login using your login credentials.
  • And now, select the blog, on which you would like to install breadcrumbs.
  • And now, from the options panel of your blog, go to the Template Editor section of your blog.
  • And now, click on “Edit Template”.

Now find the below code

<b:include data=’top’ name=’status-message’/>

And now, replace the above code with this:

<b:include data=’top’ name=’status-message’/> <b:include data=’posts’ name=’breadcrumb’/>

Now find the below code

<b:includable id=’main’ var=’top’>

And  add this code before the above mentioned code

<b:includable id=’breadcrumb’ var=’posts’> <b:if cond=’data:blog.homepageUrl == data:blog.url’>

<!– No breadcrumb on front page –>

<b:else/>

<b:if cond=’data:blog.pageType == “item”‘>

<div class=’breadcrumbs’>

Browse » <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’><data:label.name/></a> </b:if> </b:loop>


» <span><data:post.title/></span> </b:if> </b:loop> </div>

<b:else/>

<b:if cond=’data:blog.pageType == “archive”‘>

<div class=’breadcrumbs’>

Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>

<b:if cond=’data:blog.pageType == “index”‘>

<div class=’breadcrumbs’>

<b:if cond=’data:blog.pageName == “”‘>

Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> » All posts <b:else/>

Browse » <a expr:href=’data:blog.homepageUrl’>Home</a> »

Posts filed under <data:blog.pageName/>

</b:if> </div> </b:if> </b:if> </b:if>

</b:if>

</b:includable>

Now find this code

<div class=’blog-posts hfeed’>

And add the below given code before the above code

<!–Breadcrumb Hack – disable default status message

<b:include data=’top’ name=’status-message’/>default status message disabled –>

<b:include data=’posts’ name=’breadcrumb’/>

Now find  ]]></b:skin> and paste the below code before  ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;} ]]>

Check your procedures and save the template. You’re done !

Also Read :- Add Google Analytics To Blogger Blog 

Now navigate to one of your blog posts, to see the difference. Hope you liked this tutorial, in case of any doubts, please leave a comment below.

If you enjoyed this article, Get email updates

Comments

  1. Thanks a lot for sharing this i am searching for this :)

  2. Great tips, I especially like, “Only use breadcrumbs when they help a user.”

    Google’s use of breadcrumbs in the SERPS can help the user as well as remove relevant signals of allowing the user to see the actual page name. Eye-tracking studies show that 24% of people viewing SERP snippets look at the URI. Now that breadcrumbs are part of the snippet, this “signal” is key.

  3. Wow, this looks like a really useful piece of code for my blogger blogs. Breadcrumbs came natively with my blogger themes but I am planning to build my own. I really can use this.

  4. Thanks for simplifying it for all of us bloggers. blogspot is the next major thing after wordpress and people know it.. it has to customized, even if its taking some time

  5. Thanks for the tutorial man.

  6. Why don’t just install any breadcrumb plugin and enable it? :)

  7. Thanks to gives the tips of Breadcrumbs In Blogger Blogs. your article is usfule for all bloggers

  8. Bro Nice post :D Keep it up :D Really helped me :D

  9. Thanks for sharing. Your posts are always so interesting to read, and I’d love to see more!

  10. deroshan says:

    i can’t find

  11. Code of you posted here have error cannot parce

    Error parsing XML, line 933, column 4: The character sequence “]]>” must not appear in content unless used to mark the end of a CDATA section.

  12. Mohammad Waqar says:

    nice post very useful.

  13. Hello Admin,
    I am really impressed with these ideas and going to implement them. Thanks for sharing with us.

  14. Thanks for this helpful tutorial.
    Will this also add Breadcrumbs in Google SERP as I want to add Breadcrumbs for my blog to show in Google?

  15. Thanks for this info as I was searching for this since long back as there are some plugins in wordpress to add breadcumbs but for blogger users there is not such thing so great hack and keep posting such more tricks to enhance our blogger blogs

    Cheers
    Rohit Singh

Speak Your Mind

*

x
Sign up for our Newsletter

Get notified as soon as we release our freebies!

Exclusive blogging tips direct to your inbox !