Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

Tag: term comes from

How to Add Breadcrumb for blogger blog

All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don’t know what a breadcrumb is,here is a little defenition from wikipedia.

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

The trails like Home >> Label >> Post Name are the breadcrumbs.

So Now lets get Started :

  1. Login to your blogger dashboard
  2. Go to Layouts and then Edit HTML
  3. Then I would Sugguest you download the whole template first then Continue Editing.
  4. Then Tick the Expand widget Template.
  5. Now find for this Code :
    <b:include data='top' name='status-message'/>

    <b:include data='top' name='status-message'/>

  6. Now Replace it with the below code :

    <b:include data='top' name='status-message'/>
    <b:include data='posts' name='breadcrumb'/>

    <b:include data='top' name='status-message'/> <b:include data='posts' name='breadcrumb'/>

  7. Now Find :
    <b:includable id='main' var='top'>

    <b:includable id='main' var='top'>

  8. Now Replace the above code with below code :
    <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 == "item"'>
    <!-- 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 == "true"'> »
    <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 == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
    </span>
    </p>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <p class='breadcrumbs'>
    <span class='post-labels'>
    <b:if cond='data:blog.pageName == ""'>
    <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
    <b:else/>
    <a expr:href='data:blog.homepageUrl'>Home</a> » 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'>

    <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 == "item"'> <!-- 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 == "true"'> » <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 == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == "index"'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == ""'> <a expr:href='data:blog.homepageUrl'>Home</a> » All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> » 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'>

  9. Now Find ]]></b:skin> and replace it with the below code :
    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }
    ]]></b:skin>

    .breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; } ]]></b:skin>

Now you should have a working breadcrumb navigation on your system.

July 12, 2010 Ritesh Sanap Blogger Tutorials Blog Beginner Series, Blog Design Series, Blogger Hacks, fairytale, hansel and gretel, navigation aid, term comes from, Widget

Currently Trending

  • How to download Specific parts of YouTube videos
  • How to Change the Welcome/Login Screen in Windows XP ?
  • Windows Vista CD key
  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • Embed Text Resizing Widget To Increase or Decrease The Font Size
  • Free Online Angry Birds game
  • Different way’s to shutdown your pc
  • Check if your Antivirus Is Working Properly
  • Free Online Virus and Malware Scan
  • NTFS vs. FAT

Get Latest post in your Inbox

Random Posts

Leviathan – Blogger Template

July 16, 2010 By Ritesh Sanap 2 Comments

How to Check if ISP is limiting Download Speed

September 16, 2013 By Ritesh Sanap Leave a Comment

How to Show offline in Gtalk or How to be invisible in Gtalk

April 19, 2010 By Ritesh Sanap Leave a Comment

GTalk Tips and Tricks / Shortcuts

August 25, 2009 By Ritesh Sanap 2 Comments

How to add Attribution widget in blogger

May 28, 2010 By Ritesh Sanap 3 Comments

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean