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. Edit the template, unfold widgets as necessary, and make the Labels gadget display conditionally, when the static "Topics" page is displayed. Similar to my Welcome post example, add two simple lines of code - but around the internal code in the Labels gadget.
    <b:widget id='Label1' locked='false' title='Topics' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:blog.url == &quot;http://blogging.nitecruzr.net/p/topics.html&quot;'>
      <b:if cond='data:title'>
        <h2><data:title/></h2>
      </b:if>
      <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
        <b:if cond='data:display == "list"'>
          <ul>
          <b:loop values='data:labels' var='label'>
            <li>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </li>
          </b:loop>
          </ul>
        <b:else/>
          <b:loop values='data:labels' var='label'>
            <span expr:class='"label-size label-size-" + data:label.cssSize'>
              <b:if cond='data:blog.url == data:label.url'>
                <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
              <b:else/>
                <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
              </b:if>
              <b:if cond='data:showFreqNumbers'>
                <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
              </b:if>
            </span>
          </b:loop>
        </b:if>
      </div>
    </b:if>
        <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
    

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

>> Top

15 comments:

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,
Me.

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

Adam,

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
Nicole

Chuck said...

Nicole,

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!

TESTBLOGGER said...

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.

Johnny (TESTBLOGGER)

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 :)

regards,
singachu