Breadcrumbs navigation is an awesome way to help your blog's visitors and let them easily surf pages across your blog. It is a perfect and ideal way to allow the visitor navigate to the older page with ease. Breadcrumbs navigation shows your homepage as well as category page linked to that post so that the visitor can track back to the desired category and check out more contents about that particular category. So today, we are going to explain the easiest way to add breadcrumbs navigation to blogger blog and also we will discuss some of its major advantages too. So let's start rolling your fingers on the tutorial.
Before heading directly to the tutorial, let's know what actually are breadcrumbs navigation.What are Breadcrumbs Navigation?
Breadcrumbs navigation are the navigation links which allows a user to keep track their location on a website. It provides a user-friendly interface so that user can navigate back to the category attached to the landed page. Breadcrumbs navigation generally appears horizontally above the post title. Let's take a look at how breadcrumbs navigation looks like:
Why use Breadcrumbs Navigation?
While adding breadcrumbs navigation to your blogger blog, you must understand its advantages and look how is this going to benefit you. So I am going to list some major reasons point-wise.
- Easy to track-back: As I mentioned above, breadcrumbs navigation let's track back to related category and to the homepage in a single click.
- Reduces bounce-rate: No doubt! when you provide a user-friendly interface to your visitor, it will definitely reduce your blog's bounce rate.
- Tells Location: Yes, breadcrumbs navigation tells the visitors his/her location on your website, leading to overall great usability.
How To Add Breadcrumbs Navigation in Blogger Blog?
- 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.
<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 -->
<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 == "true"'>
<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.
Customization (Optional):
- To change the width of breadcrumbs navigation bar, simply search for width:620px; and change the value to your desired one.
- If you want to change the font-styling then search for font-family:Verdana, sans-serif; and replace it with your desired font coding.
- You can also change the background color by changing background: #eee; with the color code of your choice.
You Might Also Like:
In the last! I'm glad to see your huge response to my previous articles. Do comment below what you want to see next on BBeginner. Also if you have any query, do let me know.
7 comments:
why the hell your css code have your blog name ?
@timo 4 tech
Yes! It's just because of copyright issues. If someone copies our codings and share without our permissions then this customized CSS will help.
So we write codings in such a way that it will contain our branding.
Thanks. :)
Nice Article
my blog doesnt have div class='blog-posts hfeed Kindly check my blog and help me out please to make it good
I don't understand your explanation here, the first code block you present here there is no instruction to what to do with it, either to replace the code line you mentioned before or keep it.
This may be a very informative and helpful post, very genuine and practical advice. Is actually very great for all blog owner. Specially this article be assisting to the fledgeling. Thanks! complete
Hey Hammad,
I hope your blog is the best for getting blogspot tips and tricks. Because here I get important widgets for blogspot. Thanks for your awesome blog and you also can read add breadcrumbs navigation in blogger. Because this is updated!
We love comments! We appreciate your queries but to protect from being spammed, all comments will be moderated by our human moderators. Read our full comment policy here.
Let's enjoy a happy and meaningful conversation ahead!