Add Breadcrumb navigation to your Blog

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.-Wikipedia

The method that we will use here is the label of your posts. First, let's set our blog and allow label to show.

Then, from Dashboard > Template > Edit HTML > Find "]]></b:skin>" and paste the code above it

#labelstyle{color:#666666;font-size:12px;font-family:Arial, serif;padding-top:3px} #labelstyle a{color:#538cd6} #labelstyle a:hover{text-decoration:none;color:#000}
Then below the  "]]></b:skin>" paste this code <b:if cond='data:blog.pageType != "item"'> <style> #labelstyle{display:none !important;} </style> </b:if>

Tick the Expand Widget Templates then find

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
   <a expr:href='data:blog.homepageUrl'>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' expr:title='&quot;View more posts related to &quot;+data:label.name' rel='tag,nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Delete that code.
Then find this code (the one that shows first) "<a expr:name='data:post.id'/>"
Below it, paste this code. <div id='labelstyle'> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <a expr:href='data:blog.homepageUrl'>Home</a> » <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' expr:title='"View more posts related to "+data:label.name' rel='tag,nofollow'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> » <b><data:post.title/></b> </span> </div> That's it! Preview if there is no errors, save it!

Final Words

Tell me if there's an error, just comment below. For the demo, I'm using it now. See it above the title :)

You can edit the CSS style just modify the  "#labelstyle" selector's property.