Breadcrumb for WordPress Blogger Blogspot

How to create and install breadcrumbs navigation trail in Blogger Blogspot and self-hosted WordPress blog. For SEO purposes, breadcrumb is one factor highly recommended by many SEO experts.

Breadcrumb is necessary to optimize a website or blog visibility to search engine result page (SERP). It’s also important for a website/blog usability.

For Meaning, definition and picture of breadcrumbs scroll down below.

I. Breadcrumb for self-hosted WordPress Blog

1. Install Breadcrumb NavXT (Use search and install method from within your WordPress Admin as explained here) and activate it. Or you may download it to your pc before uploading the Zip format  into the Plugins -> Add New -> Upload.
2. Go to Settings -> Breadcrumb NavXT -> Posts & Pages
3. In Post Taxonomy choose “Category” or “Tags” as your breadcrumb navigation.
4. Click Save Changes. Done.
5. Live Demo See here. I choose Tags for this blog.

Notice:

• By default, the main page is Home, you may change it into Blog like mine or whatever you like. Just go to Settings -> Breadcrumb NavXT -> General -> Home Tile box -> enter whatever word you like
• The wordpress breadcrumb will look like this: Main Page -> Category / Tags -> Post Title

II. Breadcrumb for Blogger Blogspot or Top domain (example.com) hosted at blogger.com

Tip: (a) Use CTRL+F or F3 to Search for a Code inside the Template; (b) Enter the code you’re searching inside the “Find” box

1. Login to your blogger.com -> Layouts -> Edit HTML -> check the Expand Widget Template.
2. Search for code ]]></b:skin>
3. Delete and Replace with this code at #4:
4. .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>
5. Search for this code: <b:include data='top' name='status-message'/>
6. Delete and replace with the code at #7
7. <b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
8. Search for this code: <b:includable id='main' var='top'>
9. Delete and replace with the code at #10
10. <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'>
11. Click Save Template. Done.
12. Live Demo see here

Notes: The blogger.com breadcrumb will look like this: Home -> Label -> Post Title

—-
About breadcrumbs:
Breadcrumbs use a single line of text to show a page’s location in the site hierarchy.

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their locations within programs or documents.

Breadcrumbs typically appear horizontally across the top of a web page, usually below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point. A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as »), as well as various graphical treatments.

Typical breadcrumbs look like this:

Home page > Section page > Subsection page

breadcrumb navigation