How to use breadcrumb navigation in your Blogger blog

Breadcrumb navigation is a way to show links above your posts. It is useful in improving your blog’s navigation as it helps a user knows where he/she is in the navigation hierarchy. For example, a breadcrumb on your blog will look like the following:

Home > Label
Home > All posts under Label

Step 1: Sign in to your blog

Visit Google Blogspot home page at: http://blogspot.com/ orhttp://www.blogger.com/ and sign in with your Google account.

Step 2: Back up your blog template

• Choose Design / Edit HTML.
• Click "Download Full Template" to back up your blog template.

Step 3: Edit Template

• Tick on "Expand Widget Templates" in the Edit Templates tab
• Locate the following code in your blog template

<b:includable id='main' var='top'>
<b:if cond='data:mobile == &quot;false&quot;'>

Copy under

<b:includable id='main' var='top'>
 <b:if cond='data:mobile == &quot;false&quot;'>

the following codes:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb navigation on home page -->
 <b:else/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
     <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 == &quot;true&quot;'> &#187;
              <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
            </b:if>
          </b:loop>
        </b:if>
     </b:loop>
   </div>
  </b:if>
  <b:else/>
   <b:if cond='data:blog.pageType == &quot;archive&quot;'>
     <div class='breadcrumbs'>
      Archives for <data:blog.pageName/>
     </div>
   </b:if>
   <b:else/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
     <!-- breadcrumb for the label page -->
      <div class='breadcrumbs'>
 <a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts under <data:blog.pageName/>
      </div>
    </b:if>
   </b:if>

Click "Save Template".

Step 4: Add Custom CSS for your breadcumbs
Add the following CSS codes to your blogger blog html template (click here) :

.breadcrumbs {
      padding-bottom:5px;
      padding-top:5px;
      padding-right: 7px;
      margin-bottom: 5px;
      font-size: 105%;
      line-height: opx;
      border-bottom:1px double #e6e4e3;
      border-top:1px double #e6e4e3;
}

Related Posts