Breadcrumb with Navigation for More Pageviews

Breadcrumbs are trails of webpages in a website that you have browsed, shown mostly on the top of the pages for better back and forth navigation.

Breadcrumb with Post Navigation

In blogger we use Labels as Breadcrumb, which though are not true breadcrumb, we just show the crosss linkage of pages across Labels. Since, labels themselves may no be cross linked, it is advised to show only one of them, to avoid any possible penalty.

Here, I would be giving you a code which not only shows breadcrumb on your blog post but also, has an embedded Newer post, older Post Navigation on the top, that sits seamlessly on the top of your blogger post. Check this post for Live Demo, and play with it to learn how it functions.

First, add the following code into the CSS of your blogger template:

.breadcrumbs{border-bottom:1px solid #E7E7E7;
font: 8px "Lucida Sans Unicode","Lucida Grande",sans-serif;}.charfix {
 font-size:130%; line-height:0; } 

Then find the below code in your template,

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

Immediately above that paste this code:

<b:include data='posts' name='breadcrumb'/>

Now Find, the Following code in your template:

<b:includable id='main' var='top'>

There may be two places of the above code. If it occurs once, paste the below code (Modified form of Anish's Code) just above it. If twice, then paste below code above second one:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div style='display:inline'><span class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
    </span><b:if cond='data:newerPageUrl'><b:if cond='data:olderPageUrl'>
    
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><span id='blog-pager-older-link'><span class='Charfix'>&#9668;</span>  </span></a>
    
    </b:if>
    
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><span id='blog-pager-newer-link' style='float:right'><data:newerPageTitle/><span class='Charfix'>&#9658;</span>  </span> </a>
     </b:if></div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Save it, and again add or overwrite the existing CSS for the New Post, old post link, preferably through Add CSS feature of your blog:

#blog-pager-older-link, #blog-pager-newer-link, #home-link{background:#DDDDDD; border:double;padding:1px;display:inline-block;font-size:9px;}

Save, the template & check, how it looks like on post pages. You will find something like, one shown in the image of this blog.

(Note, This blogpost may not show the Navigation, till it is the newest post. For Checking how it functions and live demo, check an older post)