Dropdown menu for Labels widget

A labels widget displays your post labels. Each label is linked to a page containing posts which fall under that label. Usually as your posts increases, so will your labels. If you don’t limit them, sooner or later your labels widget will take over your sidebar.

Regain control of your sidebar, shrink the widget -by converting it into a dropdown (or is it a pulldown) menu. Your labels widget size will be reduced to just one line! And only expand into a full list when you click it.

Before applying this hack, you must already have a Label widget installed. If you don’t have one, go to Design > Page Elements and add it.

Now let’s make the dropdown:

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Make sure you DO NOT tick the  Expand Widget Templates checkbox.
4. Look for the following lines in your HTML code:

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

5. Replace that line with this 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 class='widget-content'> 
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'> 
<option>Click to choose a label</option> 
<b:loop values='data:labels' var='label'> 
<option expr:value='data:label.url'><data:label.name/> 
(<data:label.count/>) 
</option> 
</b:loop> 
</select> 
<b:include name='quickedit'/> 
</div> 
</b:includable> 
</b:widget>

• Change the width of the dropdown menu bay changing 100% to any percentage, or pixel (px).
• You can change “Click to choose a label” phrase in line 8 to your preferred phrase.
• Code line 11 is for post count, if you do not want to show post count at the end of each label, delete this line. 

6. Preview before saving.
7. Congratulations you have shrunk your labels widget and created more space. You can now add more widgets!

New Version of the Label Widget by Blogger

Blogger, as a part of its 10th Birthday celebrations, has now released a new version of the label gadget. This one is much better that the old version

What is new?

1. It comes with a Label Cloud.
2. It lets you choose which labels are to be displayed.
3. You can customize it further using CSS.

Drawbacks

1. The cloud just has 5 variations. All labels will be divided into 5 classes depending on the usage of these labels.
2. It would have been better if there was a bigger number of classes.

How to Customize?

You can customize the looks further by using CSS. As i said it has 5 classes of clouds. You can add CSS styles to each of them.
Here is a sample Style which will give a bluish look for the cloud. Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).

.label-size-5 a {color: #2789ce; /*color of a label of class 5*/
font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable. You can change the colours and font sizes of each of the 5 classes.

color : #2789ce; is responsible for the colouring of each of the classes. You can change it appropriately with some other hex colour code or something like color:red;

You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class (em is a unit of font size just like px).

I have commented the css codes(10 comments). You can remove those comments if you want (eg: /*color of a label of class 2 on hover*/ is a comment).

These CSS style definitions should be placed above

]]></b:skin>

If you are not impressed by the customizability of this blogger label cloud, try this advanced version of the cloud which is highly customizable Label Cloud Widget For Blogger