33 Improved Label Gadgets - Now Supporting Label Clouds and More! August 26, 2009 /

As part of Blogger's 10th Birthday celebrations, the Blogger team have been hard at work developing enhancements and new features.

Today, Blogger launched an enhanced "Labels" gadget which now supports label clouds, and allows us to choose which of our labels are displayed within the gadget:

In April, we announced that we wanted to hear from you about your wish list for features in Blogger. Many of you said that the label gadget should be more flexible. Today we are rolling out two enhancements to the label gadget. (Via Blogger Buzz)

Blogger's Label Cloud

Label clouds are a popular way to display label lists in Blogger templates. Previously we have needed to use extensive customizations and JavaScript to enable labels to display in cloud format as opposed to a regular list, where the size of the font indicated the popularity of the label within the blog:

Adding a label cloud to your Blogger blog is now incredibly easy! Simply go to Layout>Page Elements in your Blogger template and choose to add a new gadget in the area of your choice. Select the "Labels" gadget from the "Basics" menu, and you'll be presented with a screen like this:

In the "Display" options, choose "Cloud", then save your new gadget. Now when you view your blog, you'll see your labels display in cloud-like formation, with more popular labels highlighted in larger text.

Customizing the Label Cloud

By default, the labels will be styled to fit with other elements in the same section. All labels will appear in the same color as other links in this area and size is determined by the popularity of the label, on a scale of 1-5 (where 5 is the most popular).

If you would like to style the label cloud, you can add additional CSS to your Blogger template using the following classes:

.label-size-1 a - The class of the smallest size label in the cloud
.label-size-5 a - The class for the largest size label in the cloud

Here's an example of how you could style the largest labels to get you started:

.label-size-5 a {color: #cd0000;
font-size: 3em;
text-decoration: none;
   }

.label-size-5 a:hover {
text-decoration: underline;
   }

I'll write up a full tutorial in the next couple of days explaining in more detail how the labels may be customized to your particular preferences. In the meantime, I hope these class examples will help those familiar with CSS to begin styling their own label clouds.

Choose which labels to display

The second improvement to the Labels gadget is the ability to choose which labels are displayed in the gadget.

This is an ideal solution for those who use many different labels in their blog, and find the long display or confusing navigation difficult to deal with.

To select which labels you would like to display in your gadget, add (or edit) a Labels gadget, and choose "Selected Labels".

You can then edit the list of labels and deselect any which you prefer not to be displayed:

One feature which I like best about this enhancement is that we can choose to use more than one Label gadget to differentiate between "Categories" and "Labels" - at least in the sidebar gadgets!

For example, we could title one label gadget as "Categories", and choose to display only a handful of descriptive, "category" labels as a list. Next, we could add a second label gadget named "Tags" which displays as a label cloud and shows all tags used in the blog.

Of course, this does not yet perform the same differentiation for posts as true "categories" would, but it is a good start and enhances usability for our blog readers.

Final Thoughts

Overall, I am very impressed with these enhancements to the Blogger Labels gadget as they enable us to customize the navigation experience for our readers.

I'm sure the Blogger team have even more great features and enhancements to roll out as part of Blogger's 10th birthday celebrations and look forward to reporting and explaining more about these in the coming weeks.

Feel free to let us know your own opinions and experiences of these enhancements by leaving your comments below.