Add Breadcrumb Navigation Menu/Bar in Blogger

Add Beautiful/Stylish Breadcrumb Navigation Menu/Bar above post titles To Blogger. In this tutorial you can know how to add breadcrumb-navigation to your blogger.
Actually this help your visitors to track their position by the post.This navigation appear on top of your post.So, you can try it.Follow these steps to add it to your blog. If your post contains too many labels, only one label is shown in this breadcrumb

How To Add Beautiful/Stylish Breadcrumb Navigation Menu/Bar above post titles To Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code shown below just before/above it

/* Breadcrumb Code by http://www.latesthack.com */
.breadcrumbs {-moz-box-shadow: 0px 0px 7px #939390;-webkit-box-shadow: 0px 0px 7px #939390;box-shadow: 0px 0px 7px #939390;
/* For IE 8 */
ms-filter: &quot;progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=&#39;#939390&#39;)&quot;;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=&#39;#939390&#39;);border: 1px double #FDFDFD;font-size: 15px;line-height: 1.4em;margin: 0 5px 5px;padding: 5px 5px 5px 0;}
.breadcrumbs a {margin:5px; font-size:13px; color:purple }
.breadcrumbs a:hover {color:#dc0771}
/* Breadcrumb Code by http://www.latesthack.com */

• Now Search <b:include data='top' name='status-message'/> and replace it with the code shown below

<!-- Breadcrumb Code by http://www.latesthack.com -->
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>
<!-- Breadcrumb Code by http://www.latesthack.com -->

• Now Seach <b:includable id='main' var='top'> and replace it with the code shown below

<!-- Breadcrumb Code by http://www.latesthack.com -->
<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 -->
<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 == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
&#187;Unlabelled
</b:if>
&#187; <span style='font-size:13px;'><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'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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'>
<!-- Breadcrumb Code by http://www.latesthack.com -->

Like it? Share it.