Beautiful Breadcrumb Widget For Blogger

Today, I'm going to share a beautiful breadcrumb widget which will fit perfectly for every blog and website out there.

Introduction

Breadcrumb navigation is a common thing in a blog , it is always displayed above every post titles, it provides your readers a way to keep on track of their current location within your blog or website, it also displays the labels or tags where the post is filed and of course a homepage url. Unfortunately, bloggers and web designers today does not pay much attention to it because of its poor quality design. That's why today I will share you a beautiful and well-designed breadcrumbs navigation.

External Scripts

FontAwesome (?)

HTML

Go to Blogger » Layout » Add a Gadget » and HTML/Javascript
 Search for <b:include data='top' name='status-message'/> and just before it copy the following code

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

 Now, look for <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> then copy the following code just before it

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><ul class='breadcrumbs'><li class='home'><a expr:href='data:blog.homepageUrl' rel='tag'><i class='fa fa-home'/></a></li></ul></b:if><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><ul class='breadcrumbs'><li class='home'><a expr:href='data:blog.homepageUrl' rel='tag'><i class='fa fa-home'/></a></li><li><a><data:blog.pageName/></a></li></ul><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'><ul class='breadcrumbs' xmlns:v='https://rdf.data-vocabulary.org/#'><li class='home' typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><i class='fa fa-home'/></a></li><b:loop values='data:post.labels' var='label'><li typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></li></b:loop><li><a><data:post.title/></a></li></ul><b:else/><ul class='breadcrumbs'><li class='home'><a expr:href='data:blog.homepageUrl' rel='tag'><i class='fa fa-home'/></a></li><li>Unlabelled</li><li><a><data:post.title/></a></li></ul></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><ul class='breadcrumbs'><li class='home'><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/></a></li><li><a>Archives for <data:blog.pageName/></a></li></ul><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'><ul class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><li class='home'><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/></a></li><li><a>All posts</a></li><b:else/><li class='home'><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/></a></li><li><a>Posts filed under <data:blog.pageName/></a></li></b:if></ul></b:if></b:if></b:if></b:if></b:if></b:includable>

CSS

 Finally, search and look for ]]></b:skin> copy the following CSS code right above it

.breadcrumbs{background:#eee;border-width:1px;border-style:solid;border-color:#f5f5f5 #e5e5e5 #ccc;box-shadow:0 0 2px rgba(0,0,0,.2);overflow:hidden;list-style:none;position:relative}.breadcrumbs a,.breadcrumbs li{float:left;position:relative}.breadcrumbs a:hover{text-decoration:none;color:#111;background:#fff}.breadcrumbs a{padding:.7em 1em .7em 2em;text-decoration:none;color:#555;text-shadow:0 1px 0 rgba(255,255,255,.5);background-color:#ddd;background-image:linear-gradient(to right,#f5f5f5,#ddd)}.breadcrumbs li:first-child a{padding-left:1em;border-radius:5px 0 0 5px}.breadcrumbs a::after{right:-1em}.breadcrumbs a::after,.breadcrumbs 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}.breadcrumbs a::after{z-index:2;border-left-color:#ddd}.breadcrumbs a::before{border-left-color:#ccc;right:-1.1em;z-index:1}.breadcrumbs a:hover::after{border-left-color:#fff}

 Save your Template

Final Words

More Styles and Designs will be posted soon for you to choose from!
If you're having any problem installing this widget, kindly let us know by leaving a comment below! Until next time! Enjoy Blogging!

Did you find this widget useful? Sign Up to our Newsletter to get free updates straight to your inbox!