- shorten links and earn money!

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


Post a Comment

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.