How To Add Breadcrumbs In Blogger Blogs

Malabar Shopping

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 :)
    Aamir Lehri recently posted…Apple’s Shanghai store glass wins patentMy Profile

  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.
    Jitendra Vaswani recently posted…Three Ways To Make Sure Your Guest Post Is Google FriendlyMy Profile

  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.
    Anurag kumar recently posted…Why you need to create your own online identity and need a personal websiteMy Profile

  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
    Abdul Samad recently posted…How To Enable Feed Burner SubscriptionsMy Profile

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

Speak Your Mind

*

CommentLuv badge