9/09/2012

How to use Blogger labels as navigation in your blog

| 3 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.

3 comments: