Add descriptions to Label Gadget

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

Add descriptions to Blogger Label Gadget

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

12 comments :

  1. When we add description for labels,
    It occupies more space
    and large space to display them.

    ReplyDelete
  2. I want to try it..

    thanks for sharing master

    ReplyDelete
  3. I want to add a specific icon for each label, could you help me?

    ReplyDelete
  4. Its A nice One I would try it on one of my sites, One More Of topic Request sorry about that, earlier i asked about the, how you show the images on the Index page which doesn't exit on the item page, you showed us how to do it, please one more request, how to add that custom google search bar to the blogger as you have, i will be glad if you could just tell the outline, how to do it.

    ReplyDelete
  5. This is a great idea! I am now learning your codes. Thanks

    ReplyDelete
  6. Sweet! But I would like to put this in a post (to look it up on demand) rather than having it on every page. So generally, how do you post a widget (like labels or a stats)?
    Anyways, very helpful blog.

    ReplyDelete
  7. I noticed that my labels do not have description whn searched on Google. Will this fix the issue? As in will gogle also have the same search description?

    ReplyDelete
  8. This does not work on my template

    ReplyDelete