posted on:March 31, 2009

Tag Clouds Styling and Adding Sort Options


Users have very different opinions when it comes to tag clouds. Some like them, some can’t stand to look at the mess. Whatever your feelings are, categorizing items (i.e. blog posts) using tags have become very popular and widely spread and can’t be avoided in the web today. So we might as well learn how to deal with them.

Take a look at the full demo
| Download Tag Cloud Style & Sort

Overview

This article consists of 2 parts: one is marking up and styling tags and the second is adding behavior to tag cloud using client-side script. I’ll show you my way of styling tag clouds although you may find similar (yet different :) ) tutorials elsewhere.

HTML & CSS

Tag cloud is a list of links. Period. The only acceptable elements for organizing tags in a tag cloud are ordered or unordered list. I suggest using unordered list due to tag cloud’s "messy" nature. In most cases we don’t need wrapping element, list should be enough, but if you really have specific styling needs, you can make a compromise and wrap the list inside a div. At the end you get something like:

<div class="tags">
	<ul>
		<li class="tag1"><a href="#">Lorem ipsum</a></li> 
	</ul>
</div>

Based on certain parameters, tag cloud items have different visual treatment. The idea is to emphasize items with more "value" (according to certain parameter) and that is mostly done with changing their size and weight. Here’s an example.

tag cloud

The other option is to use color and contrast to achieve the same goal. In this example, items with less measurable value will have lower contrast and those with more value will have higher contrast.

tag cloud

Although most tag clouds are generated with back-end code and from that perspective it doesn’t matter if you add class name or inline styling, I strongly recommend using class names. In the end, it’s much easier to change a line of CSS in order to change appearance then to dig through back-end code. Depending on number of steps add class name similar to "tag1", "tag2" …"tagn" where the class marked with 1 should be define items with the lowest values and n defines highest value items.

And… Action!

Many visitors find tag clouds too confusing to use, so why not provide them with an alternative? With simple lines of JavaScript you can add sorting options that will make your tag clouds more usable. Even a simple switch from inline items to block-level items will do the trick and make them more easy on the eyes.

tag cloud

What we’ll do here basically is add a class name to the UL that will change the appearance of a tag cloud. First, let’s do that without the JavaScript.

Check out this (static) demo page with both styles.

With adding a switch button using simple lines of jQuery we can easily change these styles on click.

Check out demo page with tag cloud style switcher.

$(document).ready(function(){	
	
	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);	
	
});

Note that in this example I am using id for tag cloud container instead of class name as in first demo.

Further more, we’ll allow sorting by alphabet or by tag "value". I am using a great plugin by Sjeiti called TinySort that can be found here.

$(document).ready(function(){	
	
	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);
	
	// create a sort by alphabet button
	var sortabc = $('<a href="javascript:void(0)" class="btn">Sort alphabetically</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"asc"});
		},	
		function(){
			$("#tags ul li").tsort({order:"desc"});
		}		
		);
 	$('#tags').append(sortabc);		
	
	// create a sort by alphabet button	
	var sortstrength = $('<a href="javascript:void(0)" class="btn">Sort by strength</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"desc",attr:"class"});
		},	
		function(){
			$("#tags ul li").tsort({order:"asc",attr:"class"});
		}		
		);
 	$('#tags').append(sortstrength);			
	
});

Check out the sortable demo.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (22 Comments)

  1. Markus
    March 31, 2009

    nice tagcloud
  2. jun
    March 31, 2009

    Nice article. I'm the kind that always find tags a bit too messy to use. But with your example it's much more easy on the eye and usable. thanks.
  3. Hosting Guy
    April 1, 2009

    I love to use tag clouds and I use them in most of my websites. They can improve your website a lot if you know how to use them. I like your tags ;) they're pretty good
  4. rory
    April 1, 2009

    Never used tag clouds or even thought about using them. But I've noticed they are being used more and more these days. Thanks for bringing the code to my attention, I'll definitely start to incorporate them into my designs. As its a great way of including keywords into the site, without it looking too spammy. Thanks again
  5. ahmet maranki
    April 1, 2009

    does using this new kind tag cloud effects search engine optimization? if not, i think these are great and much useful. thank you.
  6. cssglobe
    April 1, 2009

    @almet: no it doesn't affect SEO, these are front end tricks that use already generated html.
  7. Elbert F
    April 1, 2009

    A good tip is to style in-line elements (tags) with "text-align: justify", IMO that looks better then centering. Example: http://cloud.li
  8. Marko
    April 1, 2009

    This is GREAT! I like the "change appereance" the most. Good work.
  9. Patrick Kwinten
    April 1, 2009

    call me dumb but I am not so sensitive for different colors as in te example... :-?
  10. ibrahim saraçoglu
    April 3, 2009

    thank you again. perfect idea.
  11. Edward.H
    April 5, 2009

    Really usefull tutorial, I am using your method to theme my new website's tag block.thanks www.webmasterclip.com
  12. Adam
    April 9, 2009

    We will give this one a go. We've been shopping for a new tag cloud.
  13. Rajesh Trilokhria
    April 10, 2009

    I personally don't like the tag clouds instead of clouds there are many other ways to show your key words in a more usable and accessible manner.. But I found your article very useful and easy while I tried to put tag clouds on my test page, lol thanks :-)
  14. Guillaume
    April 14, 2009

    Usefull tutorial, thank you ;)
  15. Tadukau
    April 15, 2009

    good point. Never thought about that. Just remembered when I first saw a tag cloud. Indeed, that was confusing. I think it's time to add a tag cloud to my blog! Thanks for the post.
  16. Patricia
    May 8, 2009

    I love tag clouds, especially on my blog. It never occured to me that visitors would not use them.
  17. Maxim
    May 11, 2009

    Very interesting solution
  18. Chris H
    May 13, 2009

    Hey :D great tut thanks for this i have been searching for bout 2 hours ;) lol for a way to sort by attr, thanks :D Chris
  19. jcowie
    May 29, 2009

    Amazing tag cloud, Love the use of jquery in it all. Thanks for the post. ;)
  20. Csaba
    June 12, 2009

    I think its an important part of Web 2.0. And important part of SEO. Very good tutorial.
  21. Lucy
    June 22, 2009

    loving the multiple sort options made available to the user. I like tag clouds randomized with bigger/smaller words, however given the variable personal preferences of everybody this is a great thing! Thanks!!
  22. Nikolai
    June 30, 2009

    http://3qwe.com makes interesting use of a tag cloud as a homepage for your bookmarks.

Sorry, the comment form is closed at this time.