9 Add a "breadcrumb" trail and status messages to your blog Thursday, October 2, 2008 /

An important (and often overlooked) aspect of good blog design is navigation. In order to encourage visitors to read more of your posts, stay longer and make repeated visits, you need to make it easy for readers to navigate and find the information they need!



Adding a list of related posts, links to recent articles and easily accessible categories are among the most effective techniques. Another method which I have noticed in many popular blogs is the "breadcrumb trail": a message above posts which explains how the page being read fits into the heirachy of the blog, with liks to the containing categories.



Hoctro wrote a very useful tutorial which explains how to add a "breadcrumb trail" on item pages in Blogger. However, I preffered to use a method which would display a message on all pages of the blog, including Archives and Search/Label pages. So in this tutorial, I'll explain how to add a status message for each page of your blog, with links to the containing pages for easy reference and increased page views.

How the status messages will appear in your blog

Here are some screenshots of how this customization would appear in your blog design:



On the home page:

On item pages:

On archive pages:

On search/label pages:

 

As you may notice, the default "status message"which appears on your search/label pages is replaced by this new breadcrumb trail, ensuring that this area blends completely with your blog design.



I have tried to ensure the code used in this tutorial will allow the "breadcrumb trail" to blend with other elements of your template, though you can also customize the code and styling to control the design even more.

How to add the "breadcrumb trail" to your Blogger template

This is a surprisingly easy customization to add to your Blogger template, and can be achieved in only three steps:

Step 1

Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box.

Step 2

Using your browser search function, locate this exact phrase in your Blogger template code:

<b:include data='top' name='status-message'/>

Replace this entire line with the following block of code:

<div id='places'>

<b:if cond='data:blog.homepageUrl == data:blog.url'>

      <div class='breadcrumbs'>

Welcome to <data:blog.title/>

</div>

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

 &#187; <span class='post-title entry-title'><data:post.title/></span>

      </b:loop>

    </b:if>

  </b:loop>

         



      </div>

  </b:if>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>

</div>

</b:if>

<b:else/>

  <b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

</div><!-- end places -->

Step 3

Find the closing </b:skin> tag in your template (again using your browser search function if it is helpful).



Just before this tag, add the following lines of code:

#places {

  border: 1px solid $bordercolor;

  padding: 5px 15px;

  margin: 10px 0;

  line-height: 1.4em;

}

If your template does not include the variable $bordercolor, replace this phrase with the hex value of a chosen color instead (eg: #000000 for black).



Now preview your template. In the preview, you should see the "Welcome to [your blog name]" message which tells you this customization has worked. If nescessary, you may want to add more margins/padding/a background color to the style statements for #places.



Once you have finished, you are ready to save your template. You can then take a look at various pages in your blog to see how this breadcrumb trail operates.

Your opinions?

I hope this tutorial may be a useful method for enhancing navigation and page-views in your own Blogger template. Please let us know what you think of this hack or how you may have adapted this for your own requirements by leaving a comment below.