Blogger Guider

Blogger Guider

Blogging With Interesting Guider

25 Sep 2015

How To Add Invisible Breadcrumbs In Blogger Proper With Rich Snippets?

Use Breadcrumbs As The SEO Optimizer Of Your Blogger Blog Without Showing Anything Extra!
Hi, guys. It has been a very long that that I have not published any exciting post about Blogger Widgets. Of course, because of my studies. So, today, I am back. Do you remember? I had started a series. The series was Blogger Guiders' first series and today, I am back, so I will continue that series. The series titles was:
How To Add Invisible Breadcrumbs In Blogger Proper With Rich Snippets?
How To Show Your Blog's Name Instead Of Blog's URL In Search Results?
So, today I will tell you, how to add an invisible breadcrumb on your blog post pages. I have already told you that why breadcrumbs are now very important for Bloggers. Every blogger doesn't like Breadcrumbs trail in their post pages. So that why, we have brought invisible breadcrumbs for Blogger that will not take any space and can be crawled by Google Bots.

The special things about this breadcrumb are:
  1. Invisible
  2. Light Weight
  3. With Proper Rich Snippets
  4. Does Not Take Any Space
  5. Does Not Show Anywhere
So, let's start by adding it to your awesome blog to make it more awesome! 

What Is Breadcrumb?

Breadcrumb is like a trail. Above it an example of a breadcrumb. It is like a trail because it shows where the visitor is, in a format of a trail. Like:
Home > Post Label > Post Title
So, isn't it like a trail? Yes. Google also shows this trail in its search results. For more information about why it is good for you, please go here.

What Is Rich Snippets?

Rich Snippets was introduced by Google, and they are used to provide information to Google Bots. 
Let's read what Google itself said about Rich Snippets:
Rich Snippets helps Google algorithms better index and understand the content. Some data can also be used to create and display Rich Snippets within the search results. For example, the Rich Snippet bellow shows search results for a movie, including review stars, an aggregate rating value, and vote count — very useful to anyone searching for information about this movie.
image of a Google rich snippet for a movie 

How to Add Invisible Breadcrumb?

Now let us add the Invisible Breadcrumb widget quickly!

Steps are following:
  • Go to Blogger Dashboard > Template > Edit HTML
  • Now, search for ]]></b:skin> and above it, paste below code:

#breadcrumbs-bg {
background: #FDFDFD;
border: 1px solid #EFEFEF;
max-width: 100%;
padding-left: 5px;
float: left;/*display:none;*/
min-width: 99%;
margin-top: 2px;
padding-top: 9px;
margin-bottom: 20px;
padding-bottom: 9px;
font-size: 13px;
font-family: oswald;
#breadcrumbs-bg:before {
content: "\f002";
font-family: fontawesome;
float: left;
margin-top: 0.5%;
margin-left: 6px;
color: #00ACF5;
#breadcrumbs-bg a {
padding: 10px;
list-style: none;
#breadcrumbs-bg span a {
color: #444;
text-decoration: none;
#breadcrumbs-bg span .current {
color: #00ACF5;
  1. Change #00ACF5 with the color code you want to be of the search icon.
  2. Change #00ACF5 with the color code you want to be of the post's title.
  3. Remove Red color words to make it invisible.
  • Now, just find <div class='blog-posts hfeed'> and below it, paste this code:
<b:include data='posts' name='breadcrumb'/>
  •  Now the last step. Search <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>  and below it, paste this code:
                  <b:if cond='data:blog.homepageUrl == data:blog.url'>
                    <!-- No breadcrumb on home page -->
                    <b:if cond='data:blog.pageType == &quot;item&quot;'>
                      <!-- breadcrumb for the post page -->
                      <div id='breadcrumbs-bg'>
                        <span xmlns:v="">
                          <span typeof="v:Breadcrumb">
                            <a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title" title='Home'>
                            <span rel="v:child" typeof="v:Breadcrumb">
                              <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 == &quot;true&quot;'>
                                      <a expr:href='data:label.url' rel="v:url" property="v:title">
                                <a class='current' itemprop='url'>
  • Now save your template.
[success headline='Yeah! Implemented!']Now go to your blog's post page and see if the breadcrumb is appearing or not. :)[/success]

Final Words From Editor's Desk

I hope you liked and enjoyed the post that has been published after a long period. This post was not unique because there are already some (only a few) posts that will tell about how to add breadcrumb with proper rich snippets but the which is coming (next in the series) is a unique post that you will never find in another blog till we publish it. So stay tuned and share us...Thanks!
Sign Up TO BOOST Your Conversions!

Shivansh Verma Blogger

He is an Indian Blogger who has excelled in HTML & CSS. He loves to design & code. He is a high-school student.
Privacy Policy | About Us | Contact Blogger Guider | A Blog Of Shivansh Verma