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.
breadcrumb for blogger
Then, from Dashboard > Template > Edit HTML > Find "]]></b:skin>" and paste the code above it


Then below the  "]]></b:skin>" paste this code

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

Popular posts from this blog

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls