How to add Breadcrumbs post navigation in Blogger

Breadcrumb seems very helpful tool to tell your reader about the flow of the post. Breadcrumbs stand for navigation tool that help 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 help readers to navigate the location of the post but also help the visitor to read the most related post to opened article and that increase 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.

What is 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 very necessary before adding breadcrumb in blogger. So it will help you to recover template if any error happen. 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 changing in the blog.

Conclusion:

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

[Feel free to share our post if you like]
Muhammad Rizwan
 

My name is Muhammad Rizwan, and I am 16 years young self-called Blogger. I am a student of ICS and half-time blogger. I love to work on my website and sharing new things with worldwide peoples. I share blogspot tutorials, blogging tips, SEO tips, reviews and many other helpful articles on this blog.

Click Here to Leave a Comment Below 0 comments