Breadcrumb Menu For Blogger Version 2

As we have explained earlier to you via breadcrumb menu for blogger version 1. That one of the requirements of the google webmasters (and SEO in general), the breadcrumb is a menu of the most favored by search engines. Because more systematic and hierarchy. If you have used the breadcrumb navigation of us (and we thank you), breadcrumb menu will be successful in the post with a label. If you apply more than one label on each of your posts, then the breadcrumb menu will only display the last label.

Of course it is very unpleasant and do not reflect the complete your post. To that end, we make improvements in this breadcrumb navigation widget, so it can display the entire label on your post. This is the second version, this version can make your posts very SEO friendly. All you have to do is simply to find the following code

<b:include data='top' name='status-message'/>

Then, put the following code before the code above. 

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

The next step, look for the following code 

<b:includable id='main' var='top'>

Then put the code below before the code above

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl == data:blog.url'> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

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

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:else/>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>,

</b:if>

</b:loop> 

<b:else/>

&#187;No Label

</b:if> 

&#187; <span><data:post.title/></span> 

</b:loop>

</span>

</p> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;archive&quot;'> 

<!-- breadcrumb for the label archive page and search pages.. -->

<p class='breadcrumbs'> 

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/> 

</span>

</p> 

<b:else/> 

<b:if cond='data:blog.pageType == &quot;index&quot;'> 

<p class='breadcrumbs'>

<span class='post-labels'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All Older Posts

<b:else/>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; List Of Posts On <data:blog.pageName/> 

</b:if>

</span>

</p> 

</b:if> 

</b:if>

</b:if>

</b:if>

</b:includable>

The next step, place the following CSS code before]]></ b: skin>

.breadcrumbs {

padding:6px 6px 6px 2px;

margin: 0px 0px 13px 0px;

font-size:98%;

line-height: normal;

border-bottom:3px solid #e6e4e3;

}

If you want to design your own style breadcrumb menu, you can change the CSS code above.