In the past, the tag clouds was used on many website, but nowaday, it’s hard to find a website which using tags cloud. In my opinion, it’s caused by the display of tags cloud. We feel boring with its banality. So why we dont make up for it, and replace the font text too boring by any font we love. Today, I’ll make a most beautiful tags cloud using Image Replacement Solution Facelift, some CSS code and jQuery. It’s really easy and the result is so surprising.

Take a look at the Demo and Download right below:

I think just looking for the demo, you guys have already understand how it works, but unless the explaining, it’s not a tutorial anymore. (I just want you guys to stay on my website one more minute, hehehe ^^)

Choose a font that you think it’s perfect for tags cloud
There lots of font you can choose. In this tutorial, I’m using Loyal Fame. I suggest you all the various font in Script type. It’s just cool. Here below is the some sites that you can get in there and download font for free.

Updated: Take a look at my font post 20+ Awesome handwriting Fonts for a beautiful design you SHOULD NOT miss.

• Dafont
• 1001 freefonts
• Urbanfonts
• DDFont
• ……

The Tags

Simple and easy as copy and paste these HTML code below into your page. The tags below is just an example. In WordPress, Blogger or any others Content Management System maybe vary a little bit.

  <ul>
   <li class="tag1"><a href="#java" class="flir">java</a></li>
   <li class="tag5"><a href="#jQuery" class="flir">jQuery</a></li>
   <li class="tag3"><a href="#Resources" class="flir">Resources</a></li>
   <li class="tag5"><a href="#web-design" class="flir">web design</a></li>
   <li class="tag2"><a href="#Kwicks" class="flir">Kwicks</a></li>
   <li class="tag5"><a href="#CSS" class="flir">CSS</a></li>
   <li class="tag3"><a href="#Mootools" class="flir">Mootools</a></li>
   <li class="tag2"><a href="#Wordpress" class="flir">WordPress</a></li>
   <li class="tag2"><a href="#php" class="flir">blogger</a></li>
   <li class="tag4"><a href="#Tutorial" class="flir">Tutorial</a></li>
   <li class="tag5"><a href="#Javascript" class="flir">Javascript</a></li>
   <li class="tag2"><a href="#tricks" class="flir">tricks</a></li>
  </ul>

Remember to set the class name of the link. Because we have lots of link in webpage, and we will use this class to identify the link we want to replace.

CSS code:

That’s not important to make up the link using CSS. But the size of tags we have to define. And one more thing, without css styling, the tags can not display as the cloud and we will not call it tags cloud, right?

The CSS code that I’m using in this tutorial will be:

body {
    margin:0;
    padding:0;
    background:#FFF;
    font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
    color:#555;
}

a {
    color:#222;
}

img {
    border:none;
}

/* Tag cloud */

    .tags {
    width:500px;
    margin-top: 150px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}
.tags ul {
    margin:1em 0;
    padding:.5em 10px;
    text-align:center;
}
.tags li {
    margin-top:0px;
    margin-right:5px;
    margin-bottom:0px;
    margin-left:5px;
    padding:0;
    list-style:none;
    display:inline;
}
.tags li a {
    font-family: loyal, Arial, Helvetica, sans-serif;
    text-decoration:none;
    color:#000;
    line-height: 100%;
    background-color: #FFFFFF;
    *background-color: none;
}
.tag1 a {
    font-size:100%;
    line-height: 10%;
}
.tag2 a {
    font-size:120%;
    line-height: 20%;
}
.tag3 a {
    font-size:140%;
    line-height: 30%;
}
.tag4 a {
    font-size:200%;
    line-height: 80%;
}
.tag5 a{
    font-size:350%;
    line-height: 100%;
}

/* // Tag cloud */

Note: Always remember to set the background for the link because Facelift replacement the text by image but can not display the image as transparent unless we set background value. However, with IE, Facelift can not display correct even when set or not set the background. And result I got is:

Maybe it’s a bug of this script maybe not if I get mistake. Sorry to the script’s author!

Javascript

We will use the Facelift to enable image replacement for text link. Javascript library we need is Facelift v1.2. There’re many of tutorials how to install Facelift, and I would like to forward you to:

• Install FLIR – Typography Solution For The Web
• How To Use Any Font You Wish With FLIR

And one more link to help you understand why I’m using Facelift instead of others script with the same feature. See more Cufon vs sIFR vs FLIR.

Install the Facelift

Before start to install, you have to download Facelift v1.2. After downloading, extract the archive file into your workspace folder. Inside the facelift folder is a Javascript file named “flir.js”. I recommended you not to change its structure if you not sure what you’re doing. In this tutorial, I’m not gonna change anything. I put all the script after renamed it into “js” folder.

Add Facelift to your webpage:

<script language="javascript" src="js/facelift/flir.js"></script>

Add these code below into your webpage to make Facelift works. Make sure you put it before the end of <body> tag.

<script type="text/javascript">
  FLIR.init({path:'js/facelift/'});
  FLIR.replace( 'a.flir' , new FLIRStyle({ cFont:'loyal' }) );
</script>

Config Facelift with the font you want to display

In above, you see the font will be used is “loyal”, right? Did you download the Loyal Fame font at the beginning of my post? Download it now and continue to config the Facelift.
Look for file config-flir.php inside Facelift folder and find something like this below:

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating']  = 'ArtOfIlluminating.ttf';
$fonts['okolaks']       = 'okolaksBold.ttf';
$fonts['wanta']             = 'wanta_091.ttf';

each entry in the $fonts array is a font in the fonts folder. The array key between the brackets is what we use in our parameter declarations when we want to use the font. Look back to the javascript code above, you will see I’m using “loyal” font. Now, copy the Loyal Fame font to your facelift fonts folder, and add one more code line into config-flir.php file.

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating']  = 'ArtOfIlluminating.ttf';
$fonts['okolaks']       = 'okolaksBold.ttf';
$fonts['wanta']             = 'wanta_091.ttf';
$fonts['loyal']             = 'Loyal.ttf';

That’s it to make Facelift works on your tags cloud. But if you want to add hover function for your tags cloud, you’ll need to modify javascript to work with jQuery and make your tags cloud more awesome.

It’s time for jQuey

Download jQuery right here and add it into your webpage:

<script language="javascript" src="js/jquery-1.3.2.min.js"></script>

And replace all the old javascript code at the previous part by code below:

<script type="text/javascript">

 $(document).ready(function(){

  FLIR.init({path:'js/facelift/'});
  $("a.flir").each( function() { FLIR.replace( 'a.flir' , new FLIRStyle({ cFont:'loyal' }) ); } );
  $("a.flir").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

 });

</script>

If you did all the step above, you can see the final result like this demo.

Feel free to add a comment if you think this tutorial is useful. Correct me if something I did above is wrong. Thanks for visiting!