breadcrumb navigation

How To Add Breadcrumb Navigation To Blogger Blogs

Breadcrumbs is the name given to navigation links usually displayed above posts on blogs and at the top of pages on websites.The links are a trail from the page you are currently on back to the home page.So for example on a blog you will have the home page link, a link to a label used for the post then the post title.This will be displayed like this ‘Home > Label > Post Title’.This is a very popular type of navigation on all sorts of sites and in this post i will show you how to add it to blogger.

Below you can see a screenshot and the live demo. Credit for the original breadcrumbs for Blogger goes to Hoctro with further work by Blogger Plugins.

blogger-logo

Add Breadcrumbs Navigation To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box

design-edit-html-expand-widget-templates-blogger (1)

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

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

Step 3. Now Replace it with this code

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

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

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

Step 5. Now Replace It With This 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'>
<!--Breadcrumbs code info @ http://www.spiceupyourblog.com/-->

Step 6. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code – How To Find Code In Blogger Template Template)

]]></b:skin>

Step 7. Now Replace It With This Code

/* Breadcrumbs Css info @ http://www.spiceupyourblog.com/ */
.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>

Step 8. Save your template.

That’s it breadcrumbs have been added to your blog. Credits again go to Hoctro and Blogger Plugins. Make sure to check out more of our Blogger Tutorials.

Drop Your Comments And Questions Below.

What My Robot Recommends:

How To Add Breadcrumb Navigation To Blogger Blogs
Informative
78
Useful
88
Easy To Read
96
Fact
87
Reader Rating0 Votes
0
87