Add Google Styled Breadcrumb Navigation to Blogger

Breadcrumb navigation proves to be useful in giving direction's to your reader, so that he faces no confusion using your website, its even useful as google automatically attaches your navigation below your post titles as the hyperlink, so it looks pretty professional and all the wordpress blogs comes with this awesome feature. But today with netoopsblog helpful tutorial I will be showing you how you can easily add these breadcrumbs to your blogger bog and that too with the Google Stylish CSS.

So now this tutorial includes some advanced searches right inside your Edit Template option, so just follow each step carefully and lets get started.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for <b:include data='top' name='status-message'/> now paste <b:include data='posts' name='breadcrumb'/> right after it.
3. Now again search for <b:includable id='main' var='top'> and paste below code right above it.

   <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 == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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 == &quot;true&quot;'><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 == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><p class='breadcrumbs'><span class='post-labels post-navigation'><a expr:href='data:blog.homepageUrl'> Home</a>Archives for <data:blog.pageName/></span></p><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><p class='breadcrumbs'><span class='post-labels post-navigation'><b:if cond='data:blog.pageName == &quot;&quot;'><a expr:href='data:blog.homepageUrl'>Home</a>All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a><span>Posts filed under<data:blog.pageName/></span></b:if></span></p></b:if></b:if></b:if></b:if></b:includable>

4. Now your basic HTML structure is up, now we need to give it a style of Google, so we will be using the Magic of CSS, so find ]]></b:skin> & paste below code above it.

   .breadcrumbs a{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;background-position:100% 0;background-repeat:no-repeat;border-color:#D9D9D9;border-image:none;border-style:solid;border-width:1px 0 1px 1px;color:#666;display:block;float:left;font-size:95%;padding:7px 16px 7px 19px;position:relative;text-decoration:none;z-index:1}.breadcrumbs a:hover{border-bottom-color:#C4C4C4;border-top-color:#C4C4C4;box-shadow:0 2px 2px #E8E8E8;color:#333}.breadcrumbs a:first-child,.breadcrumbs a:first-child:hover{border-top-left-radius:5px;z-index:30!important}.breadcrumbs{font-size:95%;margin:0 0 15px}

5. Now just press Save Template button and your breadcrumb is live, just open up any post and you will see your breadcrumb trail right over there.

So guys this was the easiest way for adding breadcrumb navigation to your blogger blog, well if you face any problem, so comment below I would be happy to help.