Home » Blogger Tutorials, Tricks and Hacks » Blogger Labels Tricks » How To Add Descriptions To Blogger’s Label Gadget

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add Descriptions To Blogger’s Label Gadget

How To Add Descriptions To Blogger’s Label Gadget

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

758 views

Today’s featured tutorial is from a blogger named Sardonicus Um which was inspired by an unnamed blog site that features a unique label gadget.  What makes it unique is that it also includes a description for each label (or tag) which may help a reader identify a particular tag or keyword.

This little tweak is not for everyone though. It is not advisable for those who are using Blogger’s label cloud (or any other similar label cloud out there). Adding descriptions to it will only make it look messy to a point where it’s almost unreadable. In other words, this is only recommended to those of you who are using the list view label gadget.

Follow the instructions below:

  1. Create the code for the modified gadget:
<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>

2. Depending on the number of labels you have, make sure that you provide one <B:if/> condition for each label (highlighted with color for your reference, in the above example we have 3 labels). Be sure to make the necessary value changes.
3. Assuming that the label gadget is already added to your blog, on your Blogger dashboard, head over to ‘Template’ and then ‘Edit HTML’.
4. By pressing ‘Ctrl+F’, look for the following line of code:

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

NOTE: No need to tick  the ‘Expand Widget Templates’ box.

Once you find it, replace it with the code you created for your modified gadget

5. Hit the ‘Preview’ button to check the changes and hit ‘Save template’ if you’re satisfied.

 

Liked It ? Please Share

Comments

3 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. wow that was awesome tips thanks for this now i know how to add descriptions to bloggers label

  2. amaz says:

    oh great it seems really interesting..exactly same what i was looking for thank you so much

  3. kingnt says:

    This added helpful I was looking for

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here