.
///

Steps To Adding Breadcrumb Navigation Below Posts

Readers of your blog can easily know which post and which section of your blog they are, if you have added the breadcrumb navigation to your blog. Most bloggers using wordpress and Blogger platforms use the navigation system alot to make their blog readers stay longer on their blogs.


I have explained how to add the breadcrumb navigation above post titles in Blogger blogs in one of the published posts on this blog but today, I am sharing with you, how you can add the navigation system right below your Blogger posts.

How To Get Started

Please, back up your Blogger template before implementing this trick.
  1. Log in to your dashboard via  www.blogger.com
  2. Click Template
  3. Click Edit HTML tab
  4. Please check the small box beside Expand Widget Template
    expand
  5. Find the code ]]></b:skin>
  6. Copy the highlighted code below

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

    and paste it exactly above the code ]]></b:skin>
  7. Find the following code in your template :  <data:post.body/>

  8. Copy the code below:

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
          <b:else/>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <div class='breadcrumbs'>

                 Browse &#187;  <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 == &quot;true&quot;'> &#187;
                        <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
                      </b:if>
              </b:loop>
          &#187; <span><data:post.title/></span>
               </b:if>
            </b:loop>
                </div>
            </b:if>
          <b:else/>
          <b:if cond='data:blog.pageType == &quot;archive&quot;'>
          <div class='breadcrumbs'>
          Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; 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>

  9. Paste it exactly below the:  <data:post.body/>
  10. Click Save Template button
  11. View one of your blog posts and scroll down the page and you should see something similar to: 


Note: You must be categorizing your posts with "Labels" for this to really work. if you don't know how, read: "How To Group Blog Posts into Categories".

I hope it works for you.

Feel free to check other Blogger tricks and tips.

4 comments:

  1. Franklin12/23/2012

    Nice share. Will implement it once am on my computer later today but I think I will prefer it been at the top

    ReplyDelete
    Replies
    1. No problem. If you want it at the top, follow the tutorial quoted in the post.

      Delete
  2. pls jide i wnat to install flash on my blog but i have no idea.i also wana know to advertise for people when they pay me on my blog plss i need your help my blog is nigeriatechonline.tk my mail is davrex9@gmail.com

    ReplyDelete
  3. oga Jide i can't find these

    ReplyDelete

We love to hear from you!

If your comment is unrelated to this post, please use our Contact page.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

THANKS.