How to Add Breadcrumbs to Blogger Blogs

A breadcrumb is a navigation bar which will be displayed above post. Adding a bread crumb will help you to give easy navigation within your blog. Visitors should be able to find information they want quickly and easily. Otherwise they will go and search for other competing websites.  Normally a bread crumb will look like as shown below.

For this post we can add a bread crumb in the following way.

Home>>Blogging>>Blogger>> How to Add Breadcrumb to Blogger Blogs

 Breadcrumbs for Search Engine Optimization

Bread crumb will give some other benefits other than easy navigation. It will give some search engine boost for your blog. A breadcrumb will contain more than one text links with some important keywords. In the above case Blogging is an important keyword and will help you to rank high on search results as compared to other websites. In search results Bread crumb elements will be shown instead of your BlogSpot URLS. Ie skyafar. blogspot.com/2011/08/caching-documents.html will be replaced with skyafar. blogspot.com >>Blogging>>Blogger. I am trying to provide a simple bread crumb which will look like as shown above. In this bread crumb you can add more than one label and can do some customizations to match it on your blog.

Adding Breadcrumbs to Blogger Blogs

1.Before adding Breadcrumbs to blogger blogs try to back up your blogger template to avoid bigger problems if something went wrong.  After log in to your blogger account selects particular blog to add bread crumbs. Then go to template section on left side bar.

Blogger breadcrumb1 screen shot

On the top right corner you can find Backup/Restore. Shout it and download full template.

2. After completing back up of your full blogger template again come back to template section. Edit html>>>Expand widgets. Search for the following line in your template

]]></b:skin>

3. Add the following piece of code just above the line mentioned in previous step.

.breadcrumbs {background:#eee;color:#000;float: left;width: 590px;font-size: 11px;font-family:Georgia;margin: 5px 10px 10px 0px;padding: 0px 0px 3px 0px;}

So adding breadcrumbs styling in your blog is completed. Now you can move towards the next step.

4. Search for following two pieces of code in your blogger template

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

5. replace the above code with the code mentioned below.

<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 == &quot;item&quot;'>

<div class='breadcrumbs'>

<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'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> » </b:if></b:loop>

» <span><data:post.title/></span> </b:if> </b:loop> </div>

<b:else/>

<b:if cond='data:blog.pageType == &quot;archive&quot;'>

<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 == &quot;index&quot;'>

<div class='breadcrumbs'>

<b:if cond='data:blog.pageName == &quot;&quot;'>

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

Designing your Breadcrumb for Blogger Blogs

Breadcrumbs normally shown just above the post title and it should nicely fit on your blog.  So adjust font size font family and color to suit for your blog. For designing your bread crumb go to step 2 and change the color, background etc to match your template.

I think you love this post. If you have any queries about this post and problems with adding breadcrumbs comment here. Will keep in touch with you Asap.

Make a look at the Example from a demo blog

Blogger Blogs , blogging , how to

RELATED

Thanks anjal for the post.There are lots of wordpress plugins to add breadcrumbs in our website but none explained in detail how can we add breadcrumbs in blogspot.You provided me detailed tutorial regarding this.
Thanks for your comment. I am happy that you liked it. Breadcrumbs in blogger blogs should help for getting better results.
nice trick,... but i dont like if posisition in top of title,...
Thanks for your comment. I think Best position for breadcrumbs is above title.
I can not make breadcrumb on my blog: kaosbukhari[dot]blogspot[dot]com I use the new template html5. template picture windows. my template code is different. Anyone know? help me please. How to put breadcrumb into html5 blogspot?
this is my first visit to this site and i loved your site its amazing Thanks for the breadcrumbs script but it is not working in my site www.latestgames2.com so please help.
We found breadcrumbs already there in your website.