Danzy World*

Great site for Computer and Internet Tricks with Entertainment FUN !

Sponsor

Propellerads

Sep 3, 2009

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.

5 comments:

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

    ReplyDelete
  2. wonderfull tips thanks for it dude good work keep it up


    admin smsformobile2008.blogspot.com

    ReplyDelete
  3. wow great it works fine for me. Keep Rocking

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

    ReplyDelete

Adbox