Monday, June 13, 2011

How to Add Breadcrumb for blogger blog


How to Add Breadcrumb for blogger blog



All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don't know what a breadcrumb is,here is a little defenition from wikipedia.
Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.
The trails like Home >> Label >> Post Name are the breadcrumbs.
So Now lets get Started :
  1. Login to your blogger dashboard
  2. Go to Layouts and then Edit HTML
  3. Then I would Sugguest you download the whole template first then Continue Editing.
  4. Then Tick the Expand widget Template.
  5. Now find for this Code :
    <b:include data='top' name='status-message'/>
  6. Now Replace it with the below code :
    <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>
  7. Now Find :
    <b:includable id='main' var='top'>
  8. Now Replace the above code with below code :
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <!-- No breadcrumb on home page -->
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <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 == "true"'> »
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    </b:if>
    </b:loop>
    <b:else/>
    »Unlabelled
    </b:if>
    » <span><data:post.title/></span>
    </b:loop>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
    </b:if>
    </span>
    </p>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='main' var='top'>
  9. Now Find ]]></b:skin> and replace it with the below code :
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>
Now you should have a working breadcrumb navigation on your system.

2 comments:

  1. Aahh now it all makes sense! I've been talking to a couple of different seo companies, and they all mentioned this breadcrumbing tool, but I never really understood what it did. Thanks for clarifying. I appreciate it. Take care.

    ReplyDelete
  2. Oh, my god... I really thank you all for all of your current posts especial for this a single. its wonderful activity and commence in this manner. I m wanting ahead to the new will work. danish from your us.
    digital marketing services in india

    ReplyDelete