More customization to the tag cloud code

Now, we move on to edit the CSS part of the widget. Most of the lines are just to ensure that the cloud doesn't infringe other parts of the page and ruin the nicety of it.

However, there are some elements that are easy and can be modifies to suit your taste.

Consider the first line:

#labelCloud{text-align:center;font-family:arial,sans-serif;}

You could change the font used. You can also change the alignment of the text. I’ve chosen center but other values (given below) can also be used. Try out each and find your choice.

text-align:right;
text-align:left;

The next line is

#labelCloud  .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Most of it is not necessary unless you are a serious Web designer. We shall consider only the first entry

display:inline;

This ‘inline’ value makes the tags appear ‘floating’ in the cloud.(In fact, this setting is what causes the ‘cloud’ )

We could’ve changed this to

display:block;

This will make the tags appear in what is called a ‘flat’ listing. Each entry has its own line. And in case you choose this, you might like to sort them by frequency instead of having them listed in alphabetical order. This can be changed by editing the widget in the Page Elements tab in Template section of the blog (as shown below).


And with this, I intend to end this short and informative (hopefully!!!) post. There is much more flexibility in the code but I intended this post for novices creating a tag cloud as a nice little widget to their blog.

PS:Oh,I forgot to add this in the original post.This is a continuation to the tutorial on How to add a tag cloud to your Blogger blogs.