How To Create Breadcrumbs On Blog

Breadcrumbs trail is a navigation aid used in user interfaces. It allows users to track their location in the content or article as you can see above the Title of this post.

On site or blog that has a lot of pages, this navigation enhance the way users find their path or trail. Breadcrumbs also an effective feature that shows the user's location in the hierarchy blog or website, making it a major source of contextual information for landing pages.

Breadcrumbs typically appear horizontally across the top of the webpage, often placed above the title, provide a trail for the user to follow back to the starting point or an entry in the hierarchical structure of the site-parent page (Homepage).

In general breadcrumbs looks like this:

Home> Labels> Article Title
Home> Label 1> Label 2> Article Title
Or
Home »Labels» Article Title
Home »Label 1» label 2 »Article Title
Or
Home: Labels: Article Title
Home: Label 1: Label 2: Article Title

Breadcrumbs SEO Friendly and valid HTML 5

Breadcrumbs are usually indexed by search engines like Google and can be tested in rich snippet testing tools (webmaster tools) as structured data. It also serves as an added value of Search Engine Optimization.

Below are steps how to create breadcrumbs on blogger:

1. Login in to Blogger.
2. Backup template.
3. Click Template.
4. Click Edit HTML.
5. Click Anywhere Left with mousekey 1 x in box template.
6. Click Ctrl + F (In order to speed up the search code)
And find this code ]]></b:skin>
Enter the code in the search box, then enter to search.
7. Add the following code above ]]></b:skin> or </style> in CSS style section.

CSS for Breadcrumbs

/* breadcrumbs
----------------------------------------------- */
.breadcrumbs {
    padding-top:5px;
    padding-bottom:5px;
    margin:0 0px 5px 0px;
    font:bold 11px tahoma;
    border-bottom:1px solid green;
    height:auto;
    }
.breadcrumbs a, .breadcrumbs a:visited {
    color:#CC0099;
    }
.breadcrumbs a:hover {
    color:#00477D;
    }

8. Find code <b:includable id='main' var='top'> and after found press the left arrow to expand.

9. Remove <b:includable id='main' var='top'> and Replace with the code below. Thank's to Kang Ismet for the code.

HTML for Breadcrumbs

<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 class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</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>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

10. Save template and see the results.

Functions of Breadcrumbs

For the convenience to Users
Breadcrumbs are used primarily to give users a secondary means of navigating a blog or website. By offering a trail of breadcrumbs to all pages on a large multi-level site, users can navigate to the categories of a higher level more easily.

Does not require a large area
Because Breadcrumbs are formed horizontally oriented with a clear form of breadcrumbs does not take much space on the page. The benefit is that this feature have little or no negative impact in terms of content overload, and the breadcrumbs have the benefits outweigh the negatives if used correctly.

Hopefully can be useful.