ADD BREADCRUMB NAVIGATION TO BLOGGER

This is a very popular post of navigation among bloggers. Breadcrumbs are the navigation links displayed direclty above the post. The link are a trail from the page you are currently on to the home page, as you will have a home page link on your blog, a link to a label and then the post title. This will be displayed like "Home >> Label >> Post Title"

ADD BREADCRUMB NAVIGATION TO YOUR BLOG

1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.

3). Check 'Expand Widget Templates' option.

4). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

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

NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

5). Copy and Paste the given code directly below the code <b:include data='top' name='status-message'/>


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

6). Find the following piece of code in your blog HTML code.

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


7). Replace the code <b:includable id='main' var='top'> with the code given below.


<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<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:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<!--Breadcrumbs code info @ http://www.pcleaks.blogspot.com/-->


8). Find the following piece of code in your blog HTML code. 


]]></b:skin>


9). Copy and Paste the code directly above the code you have searched.


/* Breadcrumbs Css info @ http://www.spiceupyourblog.com/ */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

10). The last and the most important step, Save you template.
If you got a good experience than leave comments and Email Me for any assistance.