Social Media Magazine

How To Add A Breadcrumb Trail On Blogger Blogspot

Posted on the 19 September 2011 by Chillpete @geekmeblog
On of the best ways to improve the navigation for a Blogger blog is to add a breadcrumb navigation to your blog. There is also the added benefit that major search engines like Google treat anchor text like breadcrumb navigation as important.
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.
How To Add A Breadcrumb Trail On Blogger Blogspot
If you look at the example above you will see:
Browse »»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'><></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

Back to Featured Articles on Logo Paperblog