Add Breadcrumb Navigation in Blogger

Breadcrumb navigation? What is breadcrumb navigation? Definition of breadcrumb :

Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. - Wikipedia.

Breadcrumb navigation looks something like this :

Do you like it? Wanna add Breadcrumb in your blog? Let's do it.

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), ]]></b:skin>

3. Add the code below, just before the ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #333333;
}

4. Now search this code (Ctrl + F),

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

5. Replace it with this code,

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

6. Then, find this code,

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

7. Replace it with this code.

8. Save your template and DONE!

Also, this hack is good for your blog SEO. Enjoy this Breadcrumb Navigation.

source : bloggerplugins