Saturday, December 18, 2010

Make A Labels Index Page In Your Blog

When it comes to encouraging repeated visits to your blog, by people who are interested in its content, a properly constructed labels array is a very useful feature.

Unfortunately, a blog of any substantial size, and fully using the potential of labels, is going to have a rather large labels array - and this blog is no exception to that rule.

Long ago, I realised that indexing the label searches in this blog was making my sidebar unacceptably long. Repeat visitors to this blog have complained occasionally, because I removed the labels index from the sidebar, to try and speed up the display load time.

This week, I remedied that situation, by making my labels index gadget display as part of a static page, and moved the gadget from the sidebar to the main part of the blog.

Since this is a standard Labels gadget, I had the choice of several Labels styles.
  • Sorting
    • Alphabetically
    • By Frequency
  • Display
    • List
    • Cloud

Note: You may find it easier get this working with the blog using a non dynamic template, with the Pages gadget in the sidebar (Show pages as "Side links").

This was a surprisingly simple task, and makes a good demonstration of a separately documented technique, conditionally displaying a template object.
  1. Publish a static page, "Topics". Make the page content as brief, or complete, as you wish.
  2. Add a Labels gadget using the "Layout" wizard "Add a Gadget" - and position the new gadget above "Blog Posts".
  3. Similar to my Welcome post example, add a new rule, using the Template Designer "Add CSS" wizard.

    <b:if cond='data:blog.url != &quot;;'> <style> #Label1 {display: none !important;} </style> </b:if>
  4. Note the blank lines before and after the new rule - they are not decorative, they are functional. Add them, with the new rule.

Having done that, I invite you to examine the results.

>> Top

Dude, hit me with a comment!

Geniaus said...

Great tip, thsnk you. Will do this shortly on my blog

Rambling Expat said...

Hi there,

This is very neat!
Thanks for the great tip!
I might work on this as soon as I have a few more posts on my blog.
Other wise it would be a page with just a few label...

Have a good day,

Xay B. said...

I went back and looked at some of the other posts you told me. The Labels html is not exactly like the one you had in your explanation of the homepage. So I what code do I need to put in and how do i fix it because it keeps on saying I need to end b/if but I'm not sure where to put the ending part.

Mary said...

Fantastic, thank you!

This has been on my to-do list for a while, and now I don't even have to do the research to work out how do do it.

Adam said...

This is great, Chuck! I just have one question.

On my template, posts appear inside a "main-outer" div class formatted with a partially transparent background.

Gadget areas, including the "over the post" region, do not have this background. Consequently your hack looks very different from posts on some blogs; on mine it is essentially unreadable without the background.

Any idea how would I add similar formatting to this (and only this) gadget?

Ideally this would integrate with your own "linklist-as-pages index" hack.

Chuck said...


Thanks for the feedback! That's definitely worth researching. If I can make the gadget appear conditionally, I can surely make the right background (transparency layer?) appear conditionally. What template name is that?

Adam said...

Chuck, I'm using the Picture Window template.

I've modded it a bit but not with respect to the tansparent elements.

One of these mods is a horizontal linklist formatted as tabs per your hack. I'm supposing these are going to just hover in space over the cloud gadget and look weird.

Fiona Faith Maddock said...

Well I've had a go. I followed your instructions carefully. I have the topics page and I tweaked the Labels gadget but so far I have only succeeded in either hiding the gadget altogether or still having it on all the pages. Are you sure there isn't some other bit of code I need, or is there a stage missing in your instructions?

Chuck said...

Hi Fiona,

If you're still having a problem, we might best explore the problem in Blogger Help Forum: Something Is Broken, were we can converse a bit easier.

$kype My Engli$h said...

Hi Chuck, RE: I'd like your help getting the complete code that's written beyond the visible page. I see:
. It's conditional to the home static page instead and displaying under the posts body.
Thank you

Chuck said...


I think this question would be best explored in a discussion, started by you, in Blogger Help Forum: How Do I?.

Birding is Fun! said...

You had exactly what I needed! Thanks so much!


Hello Chuck,

I think my Basic template has some code in it that identifies the top post and removes a border placed at the top.

Since implementing this (It works great by the way although your label has one less if statement than mine) it seems that my top post is now showing the border.

Any advice on how I could change this? I want the borders on all posts except the top one.


Anna T-a said...

Great tips! I'll try to create such an index in my blog. Keep up the good work!

singa chu said...

Cool, this is what i want.
Nice tutorial, simple and it's work :)


Books Chatter said...

Hi, I hope you are still manning this blog!

I love the solution, but unfortunately I cannot implement it currently as the layout manager only allows one gadget above the post, and that is already taken up by the pages gadget. Any workarounds?

Chuck Croll said...

Hi Books,

Thanks for asking! This is easily resolved, using a simple template adjustment.

Manga Wonderland PH said...

How do you 'add' a label gadget in a page? I'm sorry, this made me so confused. I have no background in web-designing let alone has knowledge in HTML codes. I followed everything but it didn't work for me. :( Are there missing steps on this page/tutorial?

Thanks a lot.

Chuck Croll said...

Hi Manga,

Thanks for the question.

You don't add the Labels gadget in the page.

You add a new page. You add the Labels gadget to the template, just like you add any gadget. Then, you add a CSS rule, to make the new Labels gadget only display when the new page is displayed.

Your readers see the Labels gadget seem to appear on the page. Only you know the truth.