Blogger: How to Display Labeles in 2/3/4 Columns or Multiple Columns in Labels Widget

Blogger (Blogspot.com)  provides 2 ways to display Labels: Label List and Label Cloud. By default the Label List displays one label per line- in one column. Can we display the Labels in 2 columns, or 3 / 4 columns ? The answer is yes.

Here's an example of labels listed in 3 columns on my site, in a stand alone Page Topics

In previous post I talked about using Label to organize posts- Publish Posts to Categories, and base on that idea, you can then publish posts into different Pages, which makes your blog even more organized and easy to access. If you are still confused by the difference between Post and Page, check out my post What's the Difference Between Post and Page in Blogger and Wordpress.

Now, you get a long list of Labels. How can we make the Label list organized and looks better, for example, display in 2, 3 or 4 columns, other than the default display- only one column, one label per line?

There's a easy fix, by adding one line of CSS codes from the Dashboard, you don't even need to modify the template.

Here's the CSS codes and how to add it:

CSS codes: display labels in 2 columns

.list-label-widget-content ul li{ float: left; width: 50%; }

CSS codes: display labels in 3 columns

.list-label-widget-content ul li{ float: left; width: 26%; }

Note:

You notice the codes difference between 2 Columns and 3 Columns? It's just the width difference, for 2 Columns we use 50% as width, and 3 Columns use 26%.

Basically, reduce the percentage of the width will give you more columns.

If you'd like to display in 4 columns, change the width to 21% or smaller- it really depends on the space Margin setting of your page/post.

How to add the CSS codes:

Here's how to add the CSS codes from your Blogger dashborad.

1. Copy the above codes. If you prefer 2 columns, only copy the codes for 2 columns. If you prefer 3 columns, only copy the codes for 3 columns.

2. From your Blogger dashboard, click on Template-> Customize-> Advance-> Add CSS (scroll down the small window), paste the CSS codes into the blank window at right side, click on "Apply to Blog" to save the change.

Once applied, click on Back to Blog to back to dashboard.

If you'd like to see the screenshots to see where and how to add the CSS code, please check me previous post:

How / Where to Add Custom CSS to Blogspot on Blogger.com

You done !

Summary

This post is about how to customize the Blogger Label widget / Gadget to make labels displayed in 2, 3 or Multiple Columns.

How do you use Label widget and how do you organize Labels? Share your experience and insights in the comments box below.