Blog Tutorial - Creating Breadcrumb

Creating Breadcrumb. Breadcrumb is such a navigation that appears above the title whose page is accessed. It contains a link to home page, a link to label, and the title of the page itself. It somehow makes your blog Seo friendly since it could appear as a keyword on Google Search Result Page cuz it is located on the top side, or at least usefull for it results in links that which are pointing to your home page as well as the label whose page is accessed.

Follow the guidance below to make it on your Blogger blog.

1. Loggin to your Blogger.
2. Go to Design page.
3. Edit Html.
4. Back up your template.
5. Tick on the "Expand Widget Template".
6. Now find this code on your template: ]]></b:skin> , and put the following code above it.

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

7. Find this code: <div class='post hentry uncustomized-post-template'> , and put the following code just beneath it.

<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' rel='tag'>Home</a>
<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;'>
&#187; <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>
</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

8. Save your template and check if it is working properly on your blog. Just so easy..