Adding a Breadcrumb Trail to your Blogger Post

Available language:


First, what is breadcrumb trail?
It a hack that allowed you click on the label/category before it, or click the "Home" link to go back to the front page. Here is the breadcrumb trail:


How to do it?
Firstly, go to edit html tab and expand template widget


Second, insert the code below

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>
          You are here:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  >
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
>  <b><data:post.title/></b>
          </b:if>
        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

above this code
<b:includable id='main' var='top'>


Third step:
Copy <b:include data='post' name='breadcrumbs'/>

and paste it above
<b:if cond='data:post.dateHeader'>


Fourth Step
Insert css code below

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

above ]]></b:skin>


Save your editing, and you should see the breadcrumb only when you view an item page. Hope you enjoy it.

*Source: hoctro