How to Add Page Navigation bar (Breadcrumbs ) In Blogger

 Page Navigation bar in Blogger

Any page display under of Category and is come with Home page. The Page Navigation specifies a Horizontal bar , placed at top of the page. It shows perfect display of any page from root Home page to Category under of page.

The Breadcrumbs or breadcrumb means set horizontal Page navigation bar , that is to set any page as Home >> Category >> Page title.

 Every Bloggers who are using Blogspot Platform to add breadcrumbs. This help people to easily know about your post and also it helps you in SEO purpose and easy to navigate page.

Example of Page Navigation (Breadcrumbs)

Home Page >>Category Page >> Sub Category Page >> Post or page title

 Settings of Page Navigation Bar

Step 1:  First login to blogger website.

Step 2:   Next go to Blogger Dashboard >> Theme >> Edit HTML page.

See below photos

Next

Next

Step 3: Now Search following code , where it located at Html page

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

Step 4: Now add following code at just after of above code.

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

Step 5: Now search following code

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

Step 6: Now replace above to following code

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

Step 6: Now add CSS stylish point of  

CSS code Page Navigation bar (Breadcrumbs ) In Blogger

Search following code 

]]></b:skin>

Now place following code above of code.

.breadcrumbs 
{
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;
}
.breadcrumbs :hover{
border-bottom:2px dashed #e6e4e3;
background:#f1f1f1;
}

Step 7: Save the code. Now see the output.

Note : If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.