How to add BreadCrumb Navigation widget in blogger


Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog, which would help increase viewing more posts.

How to Apply:
===========

* Login to blogger -> Layout -> html

* Check on Expanded Widget.

* Search for ]]></b:skin> (using ctrl+f) and add the following code above it.

.breadcrumbs
{
border: 1px solid #000000;
padding: 5px 15px;
margin: 10px 0;
line-height: 1.4em;
}

Note: You can set the border, padding and margin according to the way your site looks.

* Search for:


<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>

replace them with

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on front page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <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 == "true"'> » <a expr:href='data:label.url' rel='tag'><data:label.name/></a> </b:if> </b:loop>
» <span><data:post.title/></span> </b:if> </b:loop> </div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </div> <b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> »
Posts filed under <data:blog.pageName/>
</b:if> </div> </b:if> </b:if> </b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>
<!-- disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>
<data:adStart/>

* Preview it first, if the page opens fine then save it.

* Open your site, navigate to any post page to see your new breadcrumb in action.

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

Related Posts

5 comments: on "How to add BreadCrumb Navigation widget in blogger"

Vinayak said...

good one
this blog is just full of tips
keep it going

angel from heaven said...

Another great tip as always.

smsformobile said...

wonderfull tips thanks for it dude good work keep it up


admin smsformobile2008.blogspot.com

Eswari said...

wow great it works fine for me. Keep Rocking

Anonymous said...

Wow! Interesting. I may use it here http://www.fxtsignals.blogspot.com - free forex signal daily updates.

Post a Comment