Friday, January 25, 2013

Add Breadcrumb Navigation to Blogger with 8 Different Style



What is Breadcrumb ?

Breadcrumb is navigation system, which trail from current page back to home page. Breadcrumb is mostly display above the title of post. Breadcrumb help to navigate visitors from related categories. For example,
Home >> Category >> Subcategory >>Post Name
In above trail Home is followed by Category and subcategory, which indicate that where are you? from Home to Post. Breadcrumb is actual display path of current page from homepage.

Advantages

  1. Breadcrumb navigation is user friendly navigation system, which allow visitor to jump back directly to categories or subcategories.
  2. For large website, breadcrumb help to show structure of website, which given an idea to visitor for where are you? and keep the visitor in right track.
  3. Breadcrumb does not take huge space from webpage, it place in single line.

SEO with Breadcrumb 

Breadcrumb is part of Google Rich Snippets. If you install an breadcrumb in blog or website, breadcrumb is display for your website URL in Google search result, as display below.


Which helps visitor jump directly to category or subcategory from search result page.

Installation

  1. Login to Blogger
  2. Go to  Template > Edit HTML
  3. Check Expand Widget Templates.
  4. Search for 
    <b:includable id='post' var='post'>
  5. Copy below code and paste 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>
  6. Now find 
     ]]></b:skin>
  7. And copy the one of the following CSS style from below Breadcrumb Style.
  8. Finally save template.

 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/AVvXsEgGp-RkxyzmFztZflagBEl2XbbsLA0LYdFeXmmpFbEptw0LO7GxhHYduLj3wUtn9OlPAlBJ00jNcH9zHnBYlpKAlA-S8rybKnDxEBlIJ73doCm8v-7oLc3DqTJfdeu2JReOsI7BzJSzDUw/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;
}

If you like this style please subscribe for latest update. Happy blogging!!!

Tag :
Share this Post :
Author Image
  • Facebook
  • Twitter
He is owner of GrowTechInfo.com from Pune, INDIA. He is passionate about blogging. He is a Computer Engineer, Professional Blogger & an addicted Web Developer.know more..
Subscribe via Email
back to top