9/09/2012

How to use Blogger labels as navigation in your blog

| 5 comments

Labels in Blogger, if used correctly, are a great way of categorizing your posts. So now I will show you how to use them as navigation in your blog.

First thing is to select the labels you would like to use as your page navigation.

The URL of the labels come in the format of:

http://[BLOGNAME].blogspot.com/search/label/[LABEL]

So if you are to list your labels, you would use:

<ul>
  <li><a href="http://[BLOGNAME].blogspot.com/search/label/[LABEL]">LABEL</a></li>
  <li><a href="http://[BLOGNAME].blogspot.com/search/label/[LABEL]">LABEL</a></li>
  <li><a href="http://[BLOGNAME].blogspot.com/search/label/[LABEL]">LABEL</a></li>
</ul>

BUT to make things flexible (should you suddenly change your blog name), it's better to use Blogger's data tags. To get your blog's url, we will use <data:blog.homepageUrl> so that your label URL will now be:

<a expr:href='data:blog.homepageUrl + &quot;search/label/[LABEL]&quot;'>[LABEL]</a>

If you are to use it in your code block, you now get:

<ul>
  <li><a expr:href='data:blog.homepageUrl + &quot;search/label/[LABEL]&quot;'>LABEL</a></li>
  <li><a expr:href='data:blog.homepageUrl + &quot;search/label/[LABEL]&quot;'>LABEL</a></li>
  <li><a expr:href='data:blog.homepageUrl + &quot;search/label/[LABEL]&quot;'>LABEL</a></li>
</ul>

Change the highlighted text with your label and you are good to go. Just note that you should encode your url.

5 comments:

  1. Great article, i wanna reposting it on my blog with refference link to this blog. Thank you.

    ReplyDelete
  2. Thanks for sharing the article. Great article. I will definitely share it with my friends. For the URL decode or encode, I would recommend you to check that tool as well
    url-decode.com/
    That tool will definitely help you, in your future articles.

    ReplyDelete