Add Breadcrumb Navigation to Blogger in Various Style

Share it Please

Tweet

0

Breadcrumb trails is a simplest way to track related post with evenest style.If you add breadcrumb in your blog then you visitor will be able to navigate easily and can find their interested topic through breadcrumb.
Main Funda behind the Breadcrumb is use your labels in navigation and gives user to a simplest trails for go to back. Thanks to the GrowTechinfo provides various style so that we can use breadcrumbs according to  template style.

Breadcrumb basically look like above your post :

Home >> Category >> Subcategory >>Post Name

If you are used only one label then breadcrumb will show you only category between Home and Post.

If you are used two or more label then subcategory also will be there.

Benefit of Breadcrumb: 

User friendly provides jumps to back option via category or sub-categories.

Help in Search Engine Optimization of your site.

Provides  Stunning looks in your template.

How to Add Breadcrumb Navigation to Blogger?

Go to Dashboard >> Template >> Edit HTML
Search for (ctrl+f)

<b:includable id='post' var='post'>

Copy Below and paste it after above code

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
  <ul class='bcrumb'>
   <span typeof='v:Breadcrumb'><li class='first'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></li></span>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.labels'>
        <b:loop values='data:post.labels' var='label'>
        <li><span typeof='v:Breadcrumb'> <a expr:href='data:label.url' property='v:title' rel='v:url'>
          <data:label.name/>
          </a></span></li>
        </b:loop>
        <b:else/>
        <li>Unlabelled</li> </b:if>    
      <li class='last'><data:post.title/></li>
       </b:loop>
      </ul>
  </div>
</b:if>

then find (ctrl+f)

  ]]></b:skin>

Choose any one style CSS code from following CSS Style Code and Paste above it.

 Breadcrumb Style:

Style 1:

.breadcrumb {
    border-bottom:#06F 3px double;
    border-top:#06F 3px double;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    margin-top:3px;
    margin-bottom:5px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline;
    padding:0px 5px;
}
.bcrumb li a {
    color:#000;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}
.bcrumb li:after {
    padding-left:10px;
    content:'\00BB';
}
.bcrumb li.last:after {
    content:'';
}

Style 2:

 .breadcrumb {  
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:5px 20px 5px 10px;
    background-color:#f4f4f4;
    border-top-right-radius:15px;
    border-bottom-right-radius:15px;
    margin-left:-15px;
    border:#999 solid 1px;  
}
.bcrumb li:hover{
    background-color:#f9f9f9;
}
.bcrumb li a {
    color:#000;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}

Style 3:

.breadcrumb {  
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:5px 30px 5px 10px;
    background-color:#f4f4f4;  
    margin-left:-20px;
    border:#999 solid 1px;
    box-shadow:2px 2px 5px 5px #C9C9C9;
 -webkit-box-shadow:2px 2px 5px 5px #C9C9C9;
 -moz-box-shadow:2px 2px 5px 5px #C9C9C9;
  /* For IE<9 */
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);
}
.bcrumb li:hover{
    background-color:#f9f9f9;
}
.bcrumb li a {
    color:#000;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}

Style 4:

.breadcrumb {
    border-bottom:#1d658d 3px solid;  
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    margin-top:3px;
    margin-bottom:5px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline;
    padding:0px 5px;
}
.bcrumb li a {
    color:#000;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}
.bcrumb li:after {
    padding-left:10px;
    content:'\00BB';
}
.bcrumb li.last:after {
    content:'';
}

Style 5:

.breadcrumb {  
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:5px 20px 5px 10px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrMDnBiVzIj6sQ6HqvW_VtttGoAjWxR9PWDOAWBQ8JVREasCBbszswsXK7dW0gCjqlHzrLo4r5BJnmAr0STYVD6eVSrzgTiDDu_xQRrWvynBhGb67er4t1VpHPALW6Bj-hludMlKTsrZ8/h120/breadcrumb-separator.gif);
    background-position:right center;
    background-repeat:no-repeat;
 
}
.bcrumb li:hover{
    background-color:#f9f9f9;
}
.bcrumb li a {
    color:#06F;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}
.bcrumb li.last{
    background-image:none;
}

Style 6:

.breadcrumb {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:4px;
    border:#666 solid 1px;
    margin-left:-5px;
}
.bcrumb li.last {
    padding:6px;
    font-weight:bold;
    -moz-box-shadow: 0px 3px 3px #a4a4a4;
    -webkit-box-shadow: 0px 3px 3px #a4a4a4;
    box-shadow-bottom: 5px #000;
    /* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4');
}
.bcrumb li:hover {
    background-color:#f9f9f9;
}
.bcrumb li a {
    color:#06F;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}
.bcrumb li.last {
    background-image:none;
}

Style 7:

.breadcrumb {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:5px;
    border:#666 solid 1px;
    margin-left:-3px;
    -moz-box-shadow: 0px 3px 3px #a4a4a4;
    -webkit-box-shadow: 0px 3px 3px #a4a4a4;
    box-shadow-bottom: 5px #000;
    /* For IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4')";
   /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4');
}
.bcrumb li:nth-child(1){
    padding:5px;
}
.bcrumb li:nth-child(2){
    padding:6px 5px;
}
.bcrumb li:nth-child(3){
    padding:7px 5px;
}
.bcrumb li:nth-child(4){
    padding:8px 5px;
}
.bcrumb li:nth-child(5){
    padding:9px 5px;
}
.bcrumb li:nth-child(6){
    padding:10px 5px;
}
.bcrumb li:nth-child(7){
    padding:11px 5px;
}
.bcrumb li:nth-child(8){
    padding:12px 5px;
}
.bcrumb li:hover {
    background-color:#f9f9f9;
}
.bcrumb li a {
    color:#06F;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:underline;
}
.bcrumb li.last {
    background-image:none;
}

Style 8:

.breadcrumb {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    margin-top:3px;
    margin-bottom:5px;
    margin-left:20px;
}
.bcrumb {
    padding:5px;
}
.bcrumb li {
    display:inline-block;
    padding:5px 8px;
    margin-left:-1px;
    background: #fceabb; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZWFiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2ZjY2Q0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2Y4YjUwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmYmRmOTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceabb), color-stop(37%, #fccd4d), color-stop(70%, #f8b500), color-stop(100%, #fbdf93)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fceabb 0%, #fccd4d 37%, #f8b500 70%, #fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 ); /* IE6-8 */
    -moz-box-shadow: 0px 3px 3px #a4a4a4;
    -webkit-box-shadow: 0px 3px 3px #a4a4a4;
    box-shadow-bottom: 5px #000;
    /* For IE 8 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4')";
   /* For IE 5.5 - 7 */
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#d4d4d4');
    border-radius:3px;
}
.bcrumb li:hover {
    background: #f6f8f9; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iI2U1ZWJlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYxJSIgc3RvcC1jb2xvcj0iI2Q3ZGVlMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY3ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 38%, #d7dee3 61%, #f5f7f9 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f6f8f9), color-stop(38%, #e5ebee), color-stop(61%, #d7dee3), color-stop(100%, #f5f7f9)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f6f8f9 0%, #e5ebee 38%, #d7dee3 61%, #f5f7f9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f6f8f9 0%, #e5ebee 38%, #d7dee3 61%, #f5f7f9 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f6f8f9 0%, #e5ebee 38%, #d7dee3 61%, #f5f7f9 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 38%, #d7dee3 61%, #f5f7f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0 ); /* IE6-8 */
}
.bcrumb li a {
    color:#000;
    text-decoration:none;
}
.bcrumb li a:hover {
    text-decoration:none;
}

after that save it your template.
If have any problem put your question in comment box. 

Share it Please

Tweet

Mohan Singh