Add descriptions to Labels

This was a query that I got over email and I when I saw her implement it on her blog, it looked cool and I thought this might be useful for others as well. This won’t look that great with Blogger’s Label Cloud. So this trick is only for those who use the list view in the Label Gadget. To do this, you will have to modify your Label Gadget with some custom code. You will have to add a small code snippet for each label of yours.

This is how the Gadget will look like after applying the code changes

If you want to go ahead and do the same on your blog, then follow these instructions.

1. Build the modified Gadget Code.

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<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>
<!-- Label Description Start -->
<b:if cond='data:label.name == "firstlabelname"'>
<span class="labeldesc"> - This is a label1 desc</span>
</b:if>
<b:if cond='data:label.name == "secondlabelname"'>
<span class="labeldesc"> - This is label2 desc</span>
</b:if>
<b:if cond='data:label.name == "thirdlabelname"'>
<span class="labeldesc"> - This is label3 desc</span>
</b:if>
<!-- Label Description End-->
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + 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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

This is the modified gadget code. You will have to edit it appropriately and will have to add one <b:if/> condition per label. You have to edit the label name and description. Once you have done this, your modified Gadget Code is ready.

2. Now it’s time to apply these changes to your Template. I’m assuming that you have already added the label gadget to your blog.(Add it if you have not).

Go to Template > Edit HTML and look for the line which looks like ( DO NOT Expand your Widget Templates when you do this or you are gonna be in trouble)

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Replace this single line with the modified Gadget Code and Save the Template

3. That’s it. You should now see the label description on each of the Labels on your sidebar.

If you run into troubles leave a comment and I will try to help you.. :)