Add Breadcrumbs Navigation To Blogger

Add Breadcrumbs Navigation To Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.

Go to Blogger Dashboard > Template

As always download a copy of your template

Click on Edit HTML

Hit Proceed

Now find below code,

1

<b:include data='top' name='status-message'/>

just above it copy and paste below code,

1

<b:include data='posts' name='breadcrumb'/>

Now find below code (if you find two occurrences of this, then locate the second one)

1

<b:includable id='main' var='top'>

just above it paste below code,

<!-- Breadcrumb Navigation By http://pro-blogging-tips.blogspot.com/ -->

<b:includable id='breadcrumb' var='posts'>

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<!-- breadcrumb for the post page -->

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">

 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>

 <b:loop values='data:post.labels' var='label'>

 <b:if cond='data:label.isLast == "true"'>

 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>

 </b:if>

 </b:loop>

 » <span><data:post.title/></span>

</div>

<b:else/>

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>

</div>

<!-- Breadcrumb Navigation By http://pro-blogging-tips.blogspot.com/ -->

</b:if>

</b:loop>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<!-- breadcrumb for the label archive page and search pages.. -->

<div class='breadcrumbs'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>

</div>

<b:else/>

<b:if cond='data:blog.pageType == "index"'>

<div class='breadcrumbs'>

 <b:if cond='data:blog.pageName == ""'>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>

 <b:else/>

 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>

 </b:if>

</div>

</b:if>

</b:if>

</b:if>

</b:if>

</b:if>

</b:includable>

<!-- Breadcrumb Navigation By http://pro-blogging-tips.blogspot.com/ -->

* This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove the code in line number 16 and 18.

Now find below code,

1

</b:skin>

add below CSS code just above it,

.breadcrumbs {

background: #F7F7F7;

float: left;

border: 1px solid #E6E6E6;

width: 575px;

font-size: 11px;

margin: 10px 10px 10px 10px;

padding: 5px 10px 5px 10px;

}

Now save your changes and you are done.