What will a Breadcrumb Do For My WebsiteAdding breadcrumb navigation is not difficult, it doesn't matter whether you are using a Blogger template, or a custom one. A breadcrumb will display your visitors location within the blog, giving shortcuts that will allow visitors to easily navigate around your blog. These instructions should work on all the new Blogger templates.
If you look at the example above you will see:
Browse »Home»Page Design»How To Hide The Navbar In Blogger
If a visitor wanted to look at the home page they just need to click on "Home", if they wanted to look at other posts about "Page Design" once again all they have to do is click the link in the breadcrumb, and that will take them to a page that will show them all the posts with "Page Design" label.
OK so this is how you add the hack.1. Log into Blogger and click onto "Navigate >Edit HTML". Make sure that you back up your blog at this point.2. Tick the Expand Widget Template box.3. Find this line (ctrl+f) ]]></b:skin> Then add the following code above..breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}4. Then find the following code (ctrl+f) <b:includable id='main' var='top'>and paste the following code between <b:includable id='main' var='top'> and <data:defaultAdStart/><!--Breadcrumb Hack - disable default status message<b:include data='top' name='status-message'/>default status message disabled --> <b:include data='posts' name='breadcrumb'/>5. Now immediately above <b:includable id='main' var='top'> paste the following code.
<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>6. Click on "Save Template"
If you have any comments to make or would like help with anything on this post please visit our Forum and I will try my best to help
