BlogKnowHow apologies for the technical problems with the site. We are working on it and hope to resolve the issue as soon as possible.

Saturday, May 30, 2009

Add Breadcrumb Navigation to Blogger Blogspot

One way you can improve navigation of a Blogger blog (Blogspot blog) is to add breadcrumb navigation to your Blogger blog. There is also a SEO benefit of installing a breadcrumb as major search engines like Google treat anchor text links as important. In this Blogger tutorial I will guide you through the steps to add breadcrumb navigation to a Blogger blog (Blogspot blog).

Whether you are using a custom template or a default Blogger template breadcrumb navigation can be added. It is not difficult and I have updated these instructions on December 4, 2010 to take account of the new generation of default Blogger templates eg Simple.

What Will a Breadcrumb Do on My Blog?
Adding a breadcrumb to your blog provides a form of text-based navigation. A breadcrumb displays the visitor's location within a blog. The advantage of a breadcrumb is that it provides shortcuts to enable visitors to quickly get around your blog by jumping from one part of your blog to another.

To illustrate how adding a breadcrumb would work in your blog let's use an example. A breadcrumb for an individual post would follow this format:

Home > Label > Post Title

Using this post as an example a breadcrumb might be Home > Navigation > Add a Breadcrumb to Blogger Blogspot Blog. In cases where there is more than one label this hack uses the last label listed. If a visitor wanted to look at other posts about navigation all they need do is click on the "Navigation" link in the breadcrumb and they will be taken to a page which will show them all the posts with the "Navigation" label.

Breadcrumb navigation makes it easy to move around your Blogger Blogspot blog
SEO Benefits of a Breadcrumb
Apart from improving the navigation of your Blogger blog adding a breadcrumb also has SEO benefits. Anchor text such as labels tells search engines about the subject of the linked page. Search engines view a breadcrumb with a text link to relevant keywords in the post as important. Read more about SEO try the following articles:

Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO

How to Add a Breadcrumb Navigation to your Blogger Blog
It is not difficult to add a breadcrumb to your blog but it does involve adding a snippet of code to your template. Below is a step by step walkthrough which I have aimed at beginners so that anyone reading my blog will be able to follow the instructions. Credit to Hoctro for this hack.

1. Login in to Blogger if you are not already logged in

2. Navigate to Design > Edit HTML

3. Back up your blog using Download Full Template as a precaution in case you accidently overwrite some code and are not able to retrieve it.

4. Check the Expand Widget Template box

5. Add the following CSS code above this line ]]></b:skin>

.breadcrumbs {float: left;width: 590px;font-size: 11px;margin: 5px 10px 20px 10px;padding: 0px 0px 3px 0px;border-bottom: double #EAEAEA;}

Once your breadcrumb is working modify this if you need to so that it blends with the look and style of your template.

6. Find this line of code <b:includable id='main' var='top'>

7. Older XML Blogger templates and custom templates replace the entire block of code below. If you are using the new generation of Blogger templates such as Simple look for alternative instructions further down in this Step)

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


with

<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/>


Update 4 December 2010. Note: if you are using the new generation of Blogger templates eg Simple then do the following instead

Find this code block and add the code in red between <div class='blog-posts hfeed'> and <data:defaultAdStart/>

<b:includable id='main' var='top'>
<b:if cond='data:top.showPlusOne'>
<script expr:src='data:top.plusOneJsUrl'/gt;
</b:if>
<!-- posts -->
<div class='blog-posts hfeed'>
<!--Breadcrumb Hack - disable default status message
<b:include data='top' name='status-message'/>default status message disabled -->
<b:include data='posts' name='breadcrumb'/>

<data:defaultAdStart/>

8. Now immediately before <b:includable id='main' var='top'> paste the following large block of 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>

9. Click on Save Template button

10. Click View Blog and navigate to any post page to see your new breadcrumb in action

Add a Breadcrumb Based on Archives
Follow this hack provided by Purple Moggy if you would like to add a breadcrumb based on year and month. Likely format would be: Home > Year > Month > Blog Title

Tips and Troubleshooting
Some browsers have problems displaying the code above. If experience any issue then use the code in this link Add Breadcrumb Navigation to a Blogger Blog


In this Blogger tutorial you have learned how to add breadcrumb navigation to your Blogger blog (Blogspot blog) to improve SEO and site navigation. Please let me know how you get on. Good luck!


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Blogspot SEO Tips and Tricks
Add Meta Tags to Blogger for Better SEO

Subscribe to Blog Know How by Email

28 comments:

acos said...

very informative... maraming salamat

The Whizz said...

Thanks for dropping by acos. Hope you will call again

Terence Chan said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The reference to entity "ltb:includable" must end with the ';' delimiter.

Why does it say this when I do the process above? Would really like breadcrumb to my blog. thanks!

The Whizz said...

Terence I am sorry have found a typo in the code - missing ; causing the problem. Should be working fine now. Any problems see new section Tips and Troubleshooting. But do come back to me with any other issues. Good luck

Terence Chan said...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

Its now giving me this result Wizz. Can you fix it? By the way I followed what was in your article on metatags. good article. do you have something on customizing blog headers without compromising seo? I want to put graphics into my header title yet still retain the text

Danduanilkumar said...

very useful

The Whizz said...

Glad it helped iloveyoutoboys. Have fun!

Opt-In Software said...

Thank you, very helpful.

Asanka said...

Informative blog. Keep it up :)

Royal Tutor

Radiotvcentral said...

thank's...:)

Siva said...

Hey dude,

Nice blog. But for the 8th point, end tag is missing at last. But the breadcrumb links are not linkable. Not sure why it happens.

-Siva --> http://jus4funblogs.blogspot.com

The Whizz said...

Siva thanks for pointing out to me that I had left off the closing tag. All fixed now. I have also updated this article so that no matter what Blogger template you are using you can install a breadcrumb in Blogger (Blogspot).

SEO Link Building Services said...

This is a great post! I have read several posts on the site and you have a lot of great info. Too bad I didn't have the luxury of having a great informative site like this when I was starting out. I learned everything the long way and it took forever! LOL!

Dr.Rahees K said...

Very good post... I am big fan of this blog... and this site helping me to get a new looking dynamic blog. Am now focusing on seo of my blog, so this post is very useful to me. I recommend all you must bookmark this site and keep visiting for more tricks and tips

playerkhan said...

awesome works fantastic ;)

have a look at my blog

www.rareanimes.blogspot.com

ariwahju said...

all thanks, welcome to my blog

Ask Tech Guru said...

very informative.

http://www.asktechguru.com

watchseasonepisodesonline said...

This works for new template, thanks

graphic design blog said...

thanks, bro! Just what i'm looking for

World War Stories said...

I have test it and I love it!! It is nice to have breadcrumbs.. Check my site to see the output...

http://worldwar42.blogspot.com

Anonymous said...

Aahh now it all makes sense! I've been talking to a couple of different seo companies, and they all mentioned this breadcrumbing tool, but I never really understood what it did. Thanks for clarifying. I appreciate it. Take care.

LC said...

Worked just fine for me, thank you :)

freelance jobs said...

always find something useful at this blog. amazing tips!

Unknown said...

hi -
your blog is very informative and I tried to implement the breadcrumb for my blog. However, I noticed the hierarchy/coding has been changed after i clicked on the save button.

example:
http://queerologyorg.blogspot.com/search/label/%E3%80%90%E5%89%B5%E5%88%8A%E3%80%91

http://queerologyorg.blogspot.com/2007/04/we-want-you.html
(there is no breadcrumb at article level)

can you please help?

tks much

driver said...

thank ,bro

The Whizz said...

Hi queerology. Sorry I have not tried to do this but I am not sure why you would need to any way. The whole idea of breadcrumbs is to group articles that are similar. Trust that Google will find your individual articles and direct visitors without such a deep breadcrumb trail.

freescia said...

The coding seems easy, however when I cut and paste the code in the right place, my page and ads load but not the main content of my blog-article. I'm using the travel template. Please help! Thanks.
I can revert to the orginal but breadcrums were not added. www.thebarbiegeek.blogspot.com

The Whizz said...

Hi freescia. If you leave your email on a comment I will contact you about this as I can't see the problem immediately

Post a Comment