Breadcrumb Navigation

Breadcrumb navigation (as well recognized as 'Breadcrumb trail') is a navigation widget that lets users to know their position in the hierarchy of a website and to retrace their steps to fail back to beginning with less time and elbow grease. It can be seen in many websites horizontally just above the post title (or maybe below header), and contains links to categories that related to the posts, the reader is currently on. It is an alternative method of navigation which in fact increases the usability of a website. Often a slash ( / ), a single right angle quote ( › ) or even a double right angle quote ( » ) is used as separator in breadcrumb hierarchy.

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairy-tale.
Wikipedia

Before we start with the coding and all those stuffs, let's first talk about different types of breadcrumb.
Principally these are of three types.

Breadcrumbs

Location Breadcrumbs

Static breadcrumbs that indicate where the current page stands in the hierarchy of a website. This is the most usual type of breadcrumb navigation for websites with at least two layers of hierarchy depth. The links to pages or categories which are related as a 'parent' or a level up with the page they are currently viewing are provided here. For instance, 'Airport Express' is the child of 'Airport and Wireless' which is the child of 'Mac Accessories'. These altogether are the child of 'Home'.

Attribute Breadcrumbs

Breadcrumbs that provide information about the attributes or categories imposed to the current website page. This type of breadcrumb is popular for e-commerce websites. For instance, a sunglass may be categorized as ideal for men with Aviator style, gradient lens and medium size.

Path Breadcrumbs

Dynamic breadcrumbs that reveal the route or the steps the user chose to arrive at the page of a website, the reader is presently on. Out of those three types of breadcrumb navigation, 'Path breadcrumb' is least popular online.

Let's start with the coding.

Before you proceed to create modifications in your blogger template, it is highly recommended to backup your template if anything bad occurs.

1. Sign in to Blogger and go to Blogger dashboard.
2. Click the arrow adjacent to 'Go to post list' icon and select 'Template' from the dropdown menu
3. Click 'Edit HTML'.
4. Search for (Ctrl+F) <b:includable id='comment-form' var='post'>, copy (Ctrl+C) and paste (Ctrl+V) the following snippet of code just before it.

<b:includable id='breadcrumb' var='posts'>
  <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'>
      <div class='subbrdcmbs' id='brdcmb-home'>
        <a expr:href='data:blog.homepageUrl' itemprop='url'>Home</a>
      </div>
      <b:if cond='data:blog.pageType == "static_page"'>
        <div class='subbrdcmbs' id='brdcmb-last'>
          <a expr:href='data:blog.url'><data:blog.pageName/></a>
        </div>
        <b:else/>
          <!-- Breadcrumbs for post page -->
          <b:if cond='data:blog.pageType == "item"'>
            <b:loop values='data:posts' var='post'>
              <b:if cond='data:post.labels'>
                <div class='subbrdcmbs' id='brdcmb-second'>
                  <b:loop values='data:post.labels' var='label'>
                    <a expr:href='data:label.url' itemprop='url'><data:label.name/></a>
                    <b:if cond='data:label.isLast != "true"'>
                      <span class='brdcmb-sep'>|</span>
                    </b:if>
                  </b:loop>
                </div>
                <b:else/>
                  <div class='subbrdcmbs' id='brdcmb-second'><a class='brdcmb-nolink' href='#'>Unlabelled</a></div>
              </b:if>
              <div class='subbrdcmbs' id='brdcmb-last'>
                <a class='brdcmb-nolink' href='#'><data:post.title/></a>
              </div>
            </b:loop>
            <b:else/>
              <b:if cond='data:blog.pageType == "archive"'>
                <div class='subbrdcmbs' id='brdcmb-second'>
                  <a expr:href='data:blog.url'>Archives for <data:blog.pageName/></a>
                </div>
                <b:else/>
                  <b:if cond='data:blog.pageType == "index"'>
                    <b:if cond='data:blog.pageName == ""'>
                      <b:else/>
                        <div class='subbrdcmbs' id='brdcmb-second'>
                          <a expr:href='data:blog.url'>Posts filed under <data:blog.pageName/></a>
                        </div>
                    </b:if>
                  </b:if>
              </b:if>
          </b:if>
      </b:if>
    </div>
  </b:if>
</b:includable>

5. Search for (Ctrl+F) <div class='blog-posts hfeed'>. If you find multiple instances, look for the snippet that exactly matches with the following.

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == "false"'>

    <!-- posts -->
    <div class='blog-posts hfeed'>

or

<b:includable id='main' var='top'>
  <!-- posts -->
  <div class='blog-posts hfeed'>

6. Write down the following line just after <div class='blog-posts hfeed'>.

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

7. Now choose one of these styles, copy (Ctrl+C) corresponding code and paste (Ctrl+V) it before </b:skin>.

Apple Style

/*--- Breadcrumbs (Apple Style) by Bloganalyzer---*/
.breadcrumbs {
  margin: 5px 5px 5px 15px;
  border: 1px solid #ddd;
  font: bold normal 11px 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  background: #fff;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.subbrdcmbs {
  display: inline-block;
}
.breadcrumbs a {
  color: #666;
  text-decoration: none;
  display: inline-block;
  margin: 0;
  padding: 10px 15px 10px 6px;
  background-color: rgba(0, 0, 0, 0);
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTaDKQTHCW_zAYCYSxgZ6KVcUWdTFEJvRuRVoRbJvE8z-sdgcvXQPTTen81HKGC-JDqJU75mUUExIpSr4_hFTWuCU8TqKe-9_CWhRlrmzI6bVEDRtpF2ctPXLtqNYjD7VDKJoWZEKsVR8/s1600/breadcrumb_separator.png');
  background-position: 100% 50%;
  background-repeat: no-repeat;
}
#brdcmb-home a {
  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF4pOrO70ygNZ5DTubUUOQj2DV7s7GEQMWP6j9Seo4C0iY1_RYEN5sGiLQ08rNbZ2usfy2CZRKYys7rslWh8hyqTiVXo4DHt59FkWWSbLHPaOiO7F64jDE0WLChFZq9XsMk9EQD5CSeJI/s1600/breadcrumb_home.png') 9px 50% no-repeat;
  text-indent: -9999px;
  padding: 10px 20px;
}
#brdcmb-last a {
  background-image: none;
}
.brdcmb-sep {
  display: none;
}
.brdcmb-nolink {
  cursor: default;
}

Bloganalyzer Style

/*--- Breadcrumb by Bloganalyzer ---*/
.breadcrumbs {
  margin: 5px 5px 5px 15px;
}
.subbrdcmbs {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0);
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC2k1lGBPqMZjymKEWm5ZYlGRQqYg1jqzTkvI6rmyrtSocG53Q3iJBH3uGFY8I3xLVEVXzPcpYHvJv2wnPteUlK8ldIyaeWUFM10fcr4o1vlD9NuFwRoVu5jWfPlgpuh2HWroUjooqrA0/s1600/hc_yarnlett_global.png');
  background-position: 100% 0;
  background-repeat: no-repeat;
  position: relative;
}
#brdcmb-home {
  z-index: 30;
  border-left: 1px solid #D8D8D8;
}

#brdcmb-second {
  margin-left: -15px;
  z-index: 25;
}
#brdcmb-last {
  margin-left: -15px;
  z-index: 20;
}
.subbrdcmbs:hover {
  background-position: 100% -96px;
}
.breadcrumbs a {
  color: #666;
  text-decoration: none;
  font-size: 12px;
  display: inline-block;
  margin: 0;
  padding: 7px 17px 7px 25px;
}
.brdcmb-nolink {
  cursor: default;
}
#brdcmb-home a:before {
  content: '\f015';
  font-family: fontAwesome;
  margin-right: 2px;
}
#brdcmb-second a:before {
  content: '\f02c';
  font-family: fontAwesome;
  margin-right: 2px;
}
#brdcmb-last a:before {
  content: '\f15b';
  font-family: fontAwesome;
  margin-right: 2px;
}

For Bloganalyzer style, you have to install fontAwesome. To do this, search for (Ctrl+F) <head> and write down the following code after it.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' type='text/css'/>

I attempted my best to hold things as uncomplicated as possible. Any case of inquiry related to this will be welcomed.
Happy Blogging.