How to Add a Breadcrumb Navigation to your Blogger Blog

How to Add a Breadcrumb Navigation to your Blogger Blog

It is not difficult to add a breadcrumb navigation to blogger. Just follow steps given below.

SEO Benefits of Breadcrumbs

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

2. Go 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/>

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 this line <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.

Hope it will work. 

Thanks