Create and Modify Breadcrumb Navigation In Blog ~ YourBloggerTipz

MAKE MODIFICATIONS TO BLOG NAVIGATION breadcrumb

actually post that discusses the breadcrumb navigation is already widely known, but I'm sure of many who know it, still more who do not know about making this breadcrumb navigation.
With the breadcrumb navigation makes it easier for readers because they will know where their current position (was reading an article page). Usually the storage location of the breadcrumb navigation is located above the title of our posts that will appear only on post pages only.

To make this breadcrumb navigation you can follow the steps below:

1. Login to your blogger
2. Select Plan ---> EDIT HTML (check expand widgets template)
3. Save the following CSS code above ]]></ b: skin>

. Breadcrumbs { padding: 5px 5px 5px 0; margin: 0; font-size: 95%; line-height: 1.4em; border-bottom: 4px double # cadaef; }

4. then leaving you to find the following code:

<div class='post hentry uncustomized-post-template'>

5. Save the following code after the code No.. 4

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse »<a expr:href='data:blog.homepageUrl'> Home </ a>» <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b:if cond='data:label.isLast != "true"'>, </ b: if> </ B: loop> </ B: if> »<data:post.title/> </ Div> </ B: if> </ B: if>

6. Save your template

The result will be like this:

Browse »Home» Labels, labels, labels »Post Title

Notes:

You can replace the word Browse and Home on the above code, for example pake your word here, Houses, etc.
color on the bottom line for breadcrumb navigation you can change the CSS code above exactly code # cadaef

Actually making the navigation is complete, but I'll share a little to modify this breadcrumb navigation:

^ ^ Changing the Home with Pictures

To change the word HOME to the picture you can add the following code:

<img alt='Home' src=' HOME YOUR IMAGE URL'/>

Paste in the HTML above to replace the word HOME, so the result is like this:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == "item"'> <div class='breadcrumbs'> Browse »<a expr:href='data:blog.homepageUrl'> <img alt='Home' src=''/> YOUR HOME IMAGE URL </ a>» <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'> <data:label.name/> </ a> <b:if cond='data:label.isLast != "true"'>, </ b: if> </ B: loop> </ B: if> »<data:post.title/> </ Div> </ B: if> </ B: if>

The result will be like this: