Add Breadcrumbs to your blog

Once I posted a as simple tutorial to share how to put breadcrumbs to a blog.

Some said the codes were to much and a friend of mine complained, that after she put the suggested codes, there are two rows breadcrumbs navigation seen above every post title. Unfortunately she didn't know how to remove one.

Instead of spending time trying to find codes made double breadcrumbs, better to get other simple codes with simple steps in the way how to add them to HTML template editor.

Following are steps & codes to add breadcrumbs to your blog.

• Above the   ]]></b:skin>    paste these codes:

.breadcrumbs{
padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:11px; line-height: 1.4em; border-bottom:3px double #e6e4e3; }

• Next find   <div class='post hentry'>       
• Below / after the  <div class='post hentry'>   paste these following codes:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>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 != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

Below is the sample of breadcrumbs on this blog:

Terminate your editing by clicking  Save Template.