Breadcrumbs make it easy for your readers to navigate through your blog easily without much stress.

Today I will put you through on how to add breadcrumbs navigation in Blogspot easily. Breadcrumbs provide a user-friendly interface so that the user can navigate back to the category attached to the landed page. Breadcrumbs fnavigation generally appears horizontally above the post title.

How To Add Breadcrumbs Navigation in Blogspot

  • Go to Blogger.com Dashboard >> Theme > Backup your blog before making any changes.
  • Now Select Edit HTML.
  • Then Search for <div class=’blog-posts hfeed’> tag (Use Ctrl+F for quick finding) and just below it paste the following XML coding. Don’t do changes in the coding otherwise, it would not work properly. Once done, Save the Template.

Note: You may find two <div class=’blog-posts hfeed’> tags, make sure you have to work with the first one.

<b:if cond=’data:blog.homepageUrl == data:blog.url’>
<!– No breadcrumb on home page –>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<!– breadcrumb for the post page –>
<ul id=’breadcrumbs-bbeginner’>
<li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li>
<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 == &quot;true&quot;’>
<li><a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class=’current’><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

  • Now, Search for </b:skin> tag and just above it paste the following CSS coding.

#breadcrumbs-bbeginner {
background: #eee;
width:620px;
margin-left:20px;
border-width: 1px;
font-family:Verdana, sans-serif;
margin-top:40px;
text-transform: uppercase;
border-style: solid;
border-color: #f5f5f5 #e5e5e5 #ccc;
border-radius: 5px;
box-shadow: 0 0 2px rgba(0,0,0,.2);
overflow: hidden;
}
#breadcrumbs-bbeginner  li{
float: left;
}
#breadcrumbs-bbeginner  a{
padding: .7em 1em .7em 2em;
float: left;
text-decoration: none;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
background-color: #ddd;
background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#breadcrumbs-bbeginner  li:first-child a{
padding-left: 1em;
border-radius: 5px 0 0 5px;
}
#breadcrumbs-bbeginner  a:hover{
background: #fff;
}
#breadcrumbs-bbeginner  a::after,
#breadcrumbs-bbeginner  a::before{
content: “”;
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;
}
#breadcrumbs-bbeginner a::after{
z-index: 2;
border-left-color: #ddd;
}
#breadcrumbs-bbeginner  a::before{
border-left-color: #ccc;
right: -1.1em;
z-index: 1;
}
#breadcrumbs-bbeginner  a:hover::after{
border-left-color: #fff;
}
#breadcrumbs-bbeginner  .current,
#breadcrumbs-bbeginner  .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-bbeginner  .current::after,
#breadcrumbs-bbeginner .current::before{
content: normal;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
#breadcrumbs-bbeginner .current,
#breadcrumbs-bbeginner .current:hover{
font-weight: normal;
background: none;
}
#breadcrumbs-bbeginner .current::after,
#breadcrumbs-bbeginner .current::before{
content: normal;
}

  • All done! Congratulations! Breadcrumbs navigation has been successfully added to your blogger blog. You can customize the above CSS as per your desired looks.
    Moreover, this breadcrumbs navigation won’t affect your SEO score so don’t hesitate while using it.

Thats all

This Post was Last updated on February 27th, 2019, we update our content constantly to give you the best.
Note: We don't support duplicate content, this material and other digital content on this website may not be reproduced, published, broadcast, rewritten or redistributed in whole or in part without prior express written permission from Deegeek Nigeria. All content are protected by the Digital Millemium Copyright Act 1996 (DCMA)