Tutorial : Breadcrumbs Navigation for Blogger

Hi, everyone! Today I would like to show you,
how to make breadcrumbs!

Nope, not this BREADCRUMBS =x=

This breadcrumbs~

What is 'breadcrumbs' you ask?
Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (You're HERE : 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.

The tutorial a bit tricky for newbie, but I'll try my best to show you step by step slowly~~

So, Let's Start!

First!

Go to your Blogger

Then to Design Tab (the red circle)

Then to Template

Then Edit HTML

*be sure to copy your template for precaution!



1. The first thing you need to do, find this highlight code;

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

Found it? Okay! Copy the code below and paste it above the highlight code! 

Like so~~

COPY START HERE

----------------------------------------------------------------

<b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->

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

<p class='breadcrumbs'>

<span class='post-labels'>

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

You are here:

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;

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

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

&gt; <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>

<!-- End of Breadcrums Hack -->

</b:includable>

----------------------------------------------------------------

END HERE

* This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, DELETE THE HIGHLIGHT CODE

So, it'll look like this,

BEFORE DELETE  HIGHLIGHT CODE

AFTER DELETE  HIGHLIGHT CODE

NEXT,

2. Find this HIGHLIGHT code

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

Then add the CODE BELOW above those HIGHLIGHT CODE

COPY START HERE

---------------------------------------------------------

<b:include data='post' name='breadcrumbs'/>

---------------------------------------------------------

END HERE

Like so, 

Next,

3.  Find this HIGHLIGHT CODE

]]></b:skin>

Then paste the code below above the HIGHLIGHT CODE

COPY START HERE

---------------------------------------------------------

.breadcrumbs {

border-bottom:1px dotted #000;

margin:2em 0 0.5em;

padding:0 0 0.5em;

}

---------------------------------------------------------

END HERE

Like This,

(Feel free to modify the first & third parameters of the last two lines (in bold) to expand/shorten the top & bottom heights.)

And DONE! Save it!!

Thank you for your time to read my blog^^

I hope you get it! Gudluck~~ ^_~



cr : hoctrointro.blogspot.com & Helperblogger.com