HOW TO BREAD CRUMB NAVIGATION BELOW BLOGGER POST

If you have an office with a cabinet you should understand what breadcrumb navigation is. Its just aimed at telling your blog readers the section and categories they are now. In simple tearms, when you visite a blog through the search engine you will see that you are in a particular page with different sections and the page you are is in a category of posts within your blog.

You this crumb is just to let you know the section of blog you are currently browsing. In this post i will show you how to add this below your blog post so as to let readers navigate well on your blog.

Steps to follow

Remember the rule of always BACKING UP YOUR BLOG in case of any error or incompatibility. And remember we are using the new blogger layout.

Also Read: 5 traffic building secrets for new bloggers

Log in to your blogger account as usual

Click the menu tab and go down to edit template section
If you are on your template code, search for ]]></b:skin>

1ST CODE WORK TO BE DONE
Copy the code below and paste it ABOVE ]]></b:skin>

/* Breadcrumb from www.nairamind.blogspot.com
----------------------------------------------- */
.breadcrumbs {
      padding:5px 5px 5px 0px;
        margin: 0px 0px 15px 0px;
      font-size:100%;
        line-height: 1.4em;
      border-bottom:3px double #e6e4e3;
      }

2ND CODE WORK TO BE DONE

Now find this code in your template and <data:post.body/> and paste to follow code below it

1.    <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' 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>
      » <span><data:post.title/></span>
           </b:if>
        </b:loop>
            </div>
        </b:if>
      <b:else/>
      <b:if cond='data:blog.pageType == "archive"'>
      <div class='breadcrumbs'>
      Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
      </div>
      </b:if>
      <b:else/>
        <b:if cond='data:navMessage'>
      <div class='breadcrumbs'>
      <data:navMessage/>
      </div>
      </b:if>
      </b:if>
Make sure you go through this process again to make sure there is no mistake in your work. After which you click save. To verify if its successful, just browse a page in your blog and scroll down to see if your breadcrumb will appear.

Note; for this tip to work well your blog post must be categorize under labels.

Thanks for reading this post i hope you enjoyed it
To your blogging success,
Charles Emmanuel