Breadcrumb seems very helpful tool to tell your reader about the flow of the post. Breadcrumbs stand for navigation tool that helps your reader to know the location of post on your blog. I think you have seen it many times on products selling websites like Themeforest because they have used breadcrumb to show the label of the product to their customers.

Breadcrumb does not have any disadvantages but provides many benefits of using it on a blog such as product selling websites. It not only helps readers to navigate the location of the post but also helps the visitor to read the most related post to an opened article, which increases the usability of your website or blog.

According to Wikipedia

The graphical control element Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the eponymous fairytale.

You might also like to read:

• Top 10 Domain Registrars in 2018
• 10 Blogspot limitation, You Should Know Before Creating Blog
• How to Register 100% Free Domain Name in 5 Minutes

What is the website Breadcrumb post navigation tool?

Breadcrumb appears on the top of the post title in horizontal style list with symbol >> or other as separate, to tell visitors for which label or category article belongs to. It provides the flow of post and gives a back link to the tag it belongs

Consider that if you have visited my blog post “How to Add and Customize Blogger Blockquote” with the label of “Blogger” so it will look like this

Home > Blogger > How to Add and Customize Blogger Blockquote

Features of using Breadcrumbs in blog

• Increase time on website
• Make website more usable
• Increase more page views
• User-friendly interface

How to Add Breadcrumbs post navigation in Blogger

Step 1: Backup Blog Template

The backup template is essential before adding breadcrumb to a blogger. So it will help you to recover the template if any error happens. No, know-how?

Step 2: Adding Breadcrumbs trails on Top of title

Go to Blogger Template >Edit HTML. Click in the HTML box and press Ctrl+F to get access to the search box. Find this code now.

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

Now you need to replace this code with the following HTML codes by copy paste. It affects the template to show breadcrumb in a post on top of the post title.

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

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

Step 3: Adding Resouces of Archives

Copy this HTML code and find it in the search box.

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

Now it’s time to replace this code with the HTML breadcrumbs codes given.

<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’>

Step 4:Adding Breadcrumbs design

Find for this code ]]></b:skin> and add this CSS code below it to add style or design to breadcrumb trails navigation.

.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 5: Final Tech

Save the template and go to any post on your blog to see the changes in the blog.

Conclusion:

Now you can add and customize breadcrumb in blogger blog. You can also customize it by changing the codes of CSS we add in the 4th step But never do if you don’t know about CSS codes.

[Feel free to share our post if you like]