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 blogHere 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 templateThis is a surprisingly easy customization to add to your Blogger template, and can be achieved in only three steps:
Step 1Go to Layout>Edit HTML in your Blogger dashboard and ensure you have checked the "expand widget templates" box.
Step 2Using your browser search function, locate this exact phrase in your Blogger template code:
Replace this entire line with the following block of code:
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
Welcome to <data:blog.title/>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<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>
» <span class='post-title entry-title'><data:post.title/></span>
<b:if cond='data:blog.pageType == "archive"'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div><!-- end places -->
Step 3Find 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:
border: 1px solid $bordercolor;
padding: 5px 15px;
margin: 10px 0;
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.