Stylish Breadcrumbs For Blogger With Multi Label Support

Share on Tumblr

Del.icio.us

Breadcrumbs is a navigation element used in user interfaces, in this case is for website. It helps users to know their current location in a website. Breadcrumbs for website often appears below title bars or menu navigations bars with links back to each category the current post is in.

Breadcrumbs for Blogger with vBB style

Demo Tutorials

Blogger post is located in Labels, not Categories and Blogger does not support multi level categories yet, breadcrumb is sure not available too. At this tutorial I will guide you how to add breadcrumbs for blogger with these advantages:

Pros:

• Support Google Rich Snippet (you can test at Webmaster Rich Snippet Tool)
• Support multi label breadcrumb
• Breadcrumbs for label page
• Style and compatible (even support IE)
• Highly optimized and customize.

Breadcrumbs for Blogger is supported and display in Google SERP

Cons:

• Pretty hard to edit
• Only one style, I will add more style in near future.

How to add Breadcrumbs Navigation for Blogger?

Read the tutorial below.

STEP 1:

Remember back up your template first, then go to Template > Edit HTML > tick Expand widget Templates.

STEP 2:

Search for this code if you wanna show breadcrumbs outside post content section, below menu navigation. Add Step 3 code right after that.

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

And search this code if you wanna show breadcrumbs right upper post title. If you find more than one instances of code, then locate the first one and add Step 3 code above that.

<b:if cond='data:post.title'>

STEP 3:

Paste this section of code.

<!--Start Breadcrumbs code, get at http://htmlmaker.blogspot.com-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
<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;'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:label.url' property='v:title' rel='v:url'><span itemprop='title'><data:label.name/></span></a>
<span class='arrow'><span>&gt;</span></span>
</span>
</b:if>
</b:loop>
<b:else/>
Untagged
</b:if>
</b:loop>
<span class='crust'>
<a class='crumb' expr:href='data:post.url'><span><data:post.title/></span></a>
<span class='arrow'><span/></span>
</span>
</span>
</div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Archives for <data:blog.pageName/></span></a>
<span class='arrow'><span/></span></span>
</span></div>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
      <b:else/>
<div class='breadcrumb' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span class='crumbs'>
<span class='crust' typeof='v:Breadcrumb'>
<a class='crumb' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><span itemprop='title'>Home</span></a>
<span class='arrow'><span>&gt;</span></span></span> <span class='crust' typeof='v:Breadcrumb'>
        <a class='crumb' expr:href='data:blog.url' property='v:title' rel='v:url'><span itemprop='title'>Posts tagged <data:blog.pageName/></span></a><span class='arrow'><span/></span></span>
</span>
       </div>
     </b:if>
</b:if>
</b:if>
</b:if>
<!--End Breadcrumbs code, get at http://htmlmaker.blogspot.com-->

- Delete blue line of code to display breadcrumbs with all label, if not, the breadcrumb will only show the last label.
- Delete green code to remove archive breadcrumb.
- Delete red code to remove label breadcrumb.
- Delete orange code to remove post title in the breadcrumb.
After this step, you can save template, refresh your blog and see result.

STEP 4:

Add style to breadcrumb by search for ]]></b:skin> and add css code just before it:

/* Start CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/
.breadcrumb {
background: #F7F7F7;
border: 1px solid #E6E6E6;
box-shadow: 0 2px 3px #B5B5B5;
border-bottom:none;
width: 585px;
margin: 5px;
font-size: 11px;
text-transform:uppercase;
overflow: hidden;
}
.breadcrumb a, .breadcrumb a:visited {
    color: #848484;
    font-family: Arial,sans-serif;
}
.breadcrumb .boardTitle {
    display: none;
}
.breadcrumb .crust {
    display: block;
    float: left;
    position: relative;
}
.breadcrumb .crust a.crumb {
    background-color: #EDEDED;
    display: block;
    height: 24px;
    line-height: 24px;
    margin-bottom: -1px;
    outline: 0 none;
    padding: 0 10px 0 18px;
    text-decoration: none;
}
.breadcrumb .crust:first-child a.crumb {
    padding-left: 10px;
}
.breadcrumb .crust:last-child a.crumb {
    background-color: #D9D7D7;
    font-weight: bold;
}
.breadcrumb .crust:last-child .arrow span {
    border-left-color: #D9D7D7 !important;
}
.breadcrumb .crust .arrow {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #BBBBBB;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    position: absolute;
    right: -12px;
    top: 0;
    width: 0;
    z-index: 5;
}
.breadcrumb .crust .arrow span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent black transparent #EDEDED;
    border-image: none;
    border-style: solid none solid solid;
    border-width: 12px 1px 12px 12px;
    display: block;
    height: 0;
    left: -13px;
    overflow: hidden;
    position: absolute;
    text-indent: 9999px;
    top: -12px;
    white-space: nowrap;
    width: 0;
    z-index: 6;
}
.breadcrumb .crust:hover a.crumb {
    background-color: #D9D7D7;
    color: #3C3C3C;
}
.breadcrumb .crust:hover .arrow span {
    border-left-color: #D9D7D7;
} /* End CSS breadcrumb by Howeblog - http://htmlmaker.blogspot.com*/

Adjust red line code with your page's width for better display.
Save template and now breadcrumb is available in every posts, label and archive pages.

More Breadcrumb Information:

Breadcrumbs design 

The design is based on VBB forum breadcrumb design, customize for Blogger by Howeblog. Please don't remove the credit line, thank you.
I'm working on another design, based on Google Help breadcrumb with elegant hover effect, I will publish it later.

One Label or multi label?

In my opinion, multi label is better for user when surfing your website. The position in breadcrumbs is arranged by your order.

Does it violate Google webmaster guidelines?

Although breadcrumb is not officially available on Blogger yet, but Google Rich Snippet support every platform of Blogging, included Blogger. You can add Author, Thumbnail, Star Rating etc. so why not breadcrumb?

Breadcrumbs Error and Fix

For any error on your blog, please comment and let me know. I am willing to help you fix it and repair the code if it's my fault. Thank you.

Related Posts: