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

I chose an alphabetical cloud style labels index, which let me make good use of the increased display width of the main part of the blog, and reduced the length of the display required.

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".
2. Add a Labels gadget to "Page Elements", and position the new gadget above "Blog Posts".
3. Edit the template, select "Expand Widget Templates", and make the Labels gadget conditionally display, when the static "Topics" page is displayed. Similar to my Welcome post example, add two simple lines of code - but around 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