How To Add Breadcrumb Navigation

Breadcrumb navigation is a form of navigation to our blog content, so breadcrumb navigation can help visitors more easily to browse the blog content. Usually breadcrumb navigation looks like this:

Browse >> Home >> Tricks >> How To Add Breadcrumb Navigation

Many webmasters said, you should add breadcrumb navigation into your blog, beside can help your visitors, Google likes blog that added breadcrumb navigation. So, why don't you start thinking to add bredcrumb navigation into your blog now??? If you want to add breadcrumb navigation, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the Expand Widget Templates box
4. Copy the code below, and paste above ]]></b:skin>

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

=> You can change the color code here
5. Then, find <div class='post hentry uncustomized-post-template'> . Copy the code below.

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

=> You can change the words
after that, paste above <div class='post hentry uncustomized-post-template'> .
7. Done? Save it now!