Breadcrumb Navigation for Blogger

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 greater-than sign ( > ) or even a twice greater than sign ( >> ) 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 commence with the coding and all those stuffs, let's first talk about different types of breadcrumb.
Principally these are of three types.

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 in case something bad occurs.

1. Go to 'Template' and click 'Edit HTML'.
   
   For blogger old interface, make sure that 'Expand Widget Templates' is checked.
2. Search for (
   Ctrl
   +
   f
   ) <b:includable id='comment-form' var='post'> and write down the following snippet of code just before it.

#Attribution1 {
  display: none;
}

<style type="text/css">
.menu {
  margin: 0;
  padding: 0;
  font: normal normal 16px Droid Serif;
  float: left;
  clear: both;
  white-space: nowrap;
  width: 100%;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #343434;
}
.menu li {
  list-style: none;
}
.menu ul#navig {
  float: left;
  clear: both;
  display: block;
  border-bottom: 2px solid #b7b7b7;
  width: 100%;
  overflow: visible;
}
.menu li.hori {
  padding: 0.4em 1.5em 0.7em;
  float: left;
  position: relative;
  border-top: 0.3em solid transparent;
}
.menu li.hori:hover {
  border-top: 0.3em solid #b7b7b7;
}
.menu ul.sub {
  display: none;
  z-index: 9998;
  position: absolute;
  left: 0;
  top: 100%;
}
.menu li.hori:hover ul.sub {
  display: block;
}
.menu li.hori li {
  display: block;
  float: none;
  z-index: 9999;
  padding: 0.8em 5em 0.8em 0.8em;
  border-left: 0.3em solid transparent;
}
.menu li.hori li:hover {
  border-left: 0.3em solid #b7b7b7;
}
.menu a {
  color: #eee;
  display: block;
  text-decoration: none;
  line-height: 1em;
}
.menu li.hori>a {
  text-align: center;
}
.menu ul.sub a {
  font-size: 0.75em;
  text-align: left;
}
.menu li:hover>a, .menu1 ul.sub li:hover a {
  color: #ff0;
  text-decoration: none;
}
</style>

<div class="menu">
  <ul id="navig">
    <li class="hori"><a href="#" >Home</a></li>
    <li class="hori"><a href="#" >Softwares</a>
      <ul class="sub">
        <li><a href="#">Windows</a></li>
        <li><a href="#">Linux</a></li>
      </ul>
    </li>
    <li class="hori"><a href="#" >Contacts</a></li>
  </ul>
</div>

3. Search for (
   Ctrl
   +
   f
   ) <div class='blog-posts hfeed'>. You may find multiple instances of the term to be searched. Look for the snippet that exactly matches with,

<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'>

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

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

5. Search for (
   Ctrl
   +
   f
   ) </b:skin>. Now choose one of these styles and write 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('http://3.bp.blogspot.com/-d5We4ojm_yI/U5dn4NXmBbI/AAAAAAAAAQ4/ElJZp8eC7ko/s1600/breadcrumb_separator.png');
 background-position:100% 50%;
 background-repeat:no-repeat;
}
#brdcmb-home a {
 background:url('http://1.bp.blogspot.com/-nQO5Bw7oAw8/U5dn4Hx5HfI/AAAAAAAAAQ0/3VEwTGpPNk8/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/AVvXsEj2YovjOP6lrXkOZbkKoirhcSeKrBvNDLTWzi2wbMtS7TEgN_EQ4tVbXlRFpQunocV5k0DL-o8Y30LIu6y1zXUY3sUwh36PZi03AFNlNvtc04elhZJ9OtOfpDHGhEUl47PO23Phj3cpbphR/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, install 'fontAwesome' in blogger. 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.