Creating Breadcrumb Navigation on Blogger

Does not feel has been a week I do not update this blog. This is because I was busy rearranging the content  on this blog and add some tools to it. One is navigation Breadcrumb.

Breadcrumb is one of Wordpress plugins that serves to facilitate the reader in tracing the blog pages. So like a map or sitemap in the blog.

This plugin is usually placed on post pages. An example looks like this:

In addition to facilitate the reader in knowing the location of  a page that  is being  traced, this plugin can also optimize the  blog page  on search engines (SEO). Even recommended directly by Google lho. Do not believe? Here is a quote I took from the ebook 'Google Search Engine Optimization  Starter  Guide. 

Want to know more SEO techniques in Google Search Engine Optimization eBook Starter Guide? Please read here.

Ok I think sufficient explanation, for your wordpress users can download the plugin Breadcrumb here. As for the blogger users follow the steps below to install the breadcrumb navigation:

• Go to Blogger. Go to the Design menu -> Edit HTML
• Check the boxes on the 'Expand Widget Templates'.
• After that, look for the code <b:if cond='data:post.title'>
• Put the following code below <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>

• Next look for the code ]]></ b: skin>
• Put the following css code above 

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

• If you've saved your template and see the results.