Saturday, November 11, 2006

Blogger Label Cloud

I'm a big fan of word clouds, or tag clouds. When I learned of Blogger's new post labeling system, I knew somehow that label cloud can be done. So a little Google search and I found this wonderful widget on phydeaux3.

phydeaux3's label cloud has some very nice customization features including minimum and maximum font-size, algorythm-based color changing and a choice to show count. Installation is pretty simple with only 3 different parts to copy.

I've installed it on my own blog and made a number of small changes (making it way better):

  1. added minPostCount where the cloud only display the label which have at least the specified amount of post. This is useful for a large blog with too many labels.
  2. reduced to only 2 parts to copy, i.e. CSS codes and widget codes.
  3. Non-javascript friendly. The original label cloud only works if JavaScript is enabled. Although most people usually have JavaScript enabled, there is nothing wrong to make it JavaScript-disabled friendly. Besides, it's good for search engine indexing.
  4. Using relative URL instead of absolute URL where you are required to insert your blog address, a move that I ... well ... considered as unnecessary (unless you're using FTP)

Installation in two parts:
  1. CSS. Goes anywhere between the tags <b:skin> ... </b:skin>, preferably right before the end tag
    /* Label Cloud Styles
    ----------------------------------------------- */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}
  2. Widget. Goes anywhere between <b:section id="'sidebar'"> ... </b:section>
    <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>

    <div class='widget-content'>
    <div id='labelCloud'> <ul>
    <b:loop values='data:labels' var='label'>
    <b:if cond='data:blog.url == data:label.url'>
    <a expr:href='data:label.url'><></a>
    <script type='text/javascript'>
    // Label Cloud User Variables
    var maxFontSize = 20;
    var maxColor = [168,181,248];
    var minFontSize = 8;
    var minColor = [0,0,0];
    var lcShowCount = false;
    var minPostCount = 0; //integer

    // Don't change anything past this point -----------------
    function s(a,b,i,x){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    return v

    var ta=0;
    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    <b:loop values='data:labels' var='label'>
    <b:if cond='data:label.count'>
    if (<data:label.count/> &gt; minPostCount) ts[&quot;<>&quot;] = <data:label.count/>;</b:if></b:loop>

    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    tz = labelCount.length-1;
    lc2 = document.getElementById('labelCloud');
    lc2.innerHTML = '';
    ul = document.createElement('ul');
    ul.className = 'label-cloud';
    for(var t in ts){
    for (var i=0;3 &gt; i;i++) {
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li'); = fs+'px'; = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t; = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
    a.href = '/search/label/'+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    else {
    abnk = document.createTextNode(' ');

    <b:include name='quickedit'/>

After installing, you'll just have to make changes to the variables to suit your blog best. The bold section is where you customise your settings.

I think it's pretty straight forward how this is used, incase you need more explanation you can get a complete documentation on phydeaux3.

Have fun.


Sid said...

excellent hack, this is going to really come in handy as my blog grows.

Seige said...

Thanks Sid, welcome to my world of widget fun.

Daniel said...
This comment has been removed by the author.
Daniel said...

Thanks, Seige! I have added the hack to all my upgraded blogs (yes plural); namely

This hack really brings out the stuff my blogs are about. Thank you so much!

Zia Rezvi said...

Thanks this is fantastic!

the_donn said...


I have used the original beta blogger label cloud on one of my blogs and it works wonderfully. I will now re-install your code to trial the improvements. Improvements sound eminently sensible.

I am wondering, my other blog is on my own ftp server to ensure the files are stored locally. This means I have to use 'old Blogger'. Can you please advise is there a way of building in tag clouds to this ?

moodswingingmommy said...

Many thanks! Now If I could just figure out how to increase the font size of the tiny little words.

G said...

Thanks for the foolproof instructions. I am a dunce at HTML and CSS, never even interested to learn until I set up my site,
forced to complain now somehow I'm into it! Your widget is wicked and easy to use.

yves@brussels said...


Is there any way to get information about the request object in the blogger template? I mean something like "where did the request come from"...

What I actually need is to customize my template's output (the < b : if cond=''>) following the url the request initiator.


Shashi said...

Thank you for this excellent post.

Jonathan said...

How can I get rid of the numbers in parentheses beside the label?

Anonymous said...

Thanks for the hack. I'm having a bit of trouble with getting it to work in IE 6 or 7 - although in firefox it works well. Any advice?

Irfaan said...

Great post. Thank you.

VaMpIrE_KiSs said...

thxxxx, i luv it

ilaron said...
This comment has been removed by the author.
ilaron said...
This comment has been removed by the author.
ilaron said...

Thanks, thanks, thanks and thanks!
With the instructions of phideaux3 my blog did not work. Instead with your instructions my blog it works well. I do not know the reason of that because I am a novice. If you want, you may see here:

Excuse my poor english.

rcanblog said...

great job
i installed the same on

quirkique.belle said...

does this work in a classic template?

Anonymous said...

Thanks for the label cloud. Installation worked like a charm.

Søren Uggerholt said...

Thanx Seige (and thanx Google).

Kim Wheedleton said...

This was perfect, and very easy to follow! Thanks! said...

can you check my blog and see what went wrong?? tried and retried more than dozen times. however i did it, it always breaks into lines instead of showing a cloud...


D/M, but probably M said...

I did it and it didn't work. Take a look if you want. It should be above the archive.

kaspo said...

yo yo yo ... i get it ... thanks :)

She Rev said...

I am REALLY clueless at all of this, so please speak slowly. :)

Using your code and the more specific directions from the other guy's original post, I was able to get the Label Cloud widget to show up. However, it showed up just as a center-aligned list with numbers instead of any changes in font or color or anything like that. I left the variables as you had them, but would that have done this?

Any advice would be AWESOME. Again, I'm completely clueless.

She Rev said...

Forgot to give you a direct link to the blog.

Chris T said...

She rev, my label cloud is doing exaclty the same as yours =/

pengodam said...

Thank nice tricks and easy to install to my blog. thank for this information

iThink said...

Hi Seige,
I want to remove the arrow marks from between the labels in cloud. I used the phydeaux3 tutorial, but could not figure out a way to remove the arrows.

Another thing, how to show a label as a link, when mouse pointer is run over labels. (I think that is called hovering?)

Sorry if the question is too simple, I dont know a bit about web technologies...

iThink said...

you can check what I mean at

cynical nekojin said...

Nicely done, I like your improvements. Thanks a bunch.

Mattijs Mooimuziek said...
This comment has been removed by the author.
Mattijs Mooimuziek said...

This is an excellent hack. However, recently it stopped working for me under IE7. In FF (v3) it still works like a charm, but in IE7 it just quit. I'm braaking my head over this, but am completely clueless. If anyone has an idea, I'd be grateful. My blog is in Dutch and at:



Ty said...

Thanks for the tip and great instructions. I've implemented it on and it's exactly what I wanted.

USA.Store said...


thank you for tip "Blogger Label Cloud"

and i have blog promote

Scooter shopping online
Beauty shopping online
Beauty shopping online
Electronics shopping online
Rainbow sandals shoes shopping online
Baby car seats shopping online
Samsung LCD HDTVs shopping online
Dog food shopping online
Canon camera shopping online
Sony camera shopping online
Nikon camera shopping online
Xbox 360 shopping online
Usa shopping online
Handbags coach shopping online
Apple ipod shopping online
shopping online
Usa shopping online
shopping online
DE shopping online
UK shopping online
CA shopping online

Teju said...

thanks i have used it for my

sarahann said...

TY! This was a lot easier, I'm not to familiar w/ html and coding this was an awesome help. TY feel free to check it out on my blog!

Paul said...

Thanks for this. it worked a treat on my blog

Paul said...
This comment has been removed by the author.
Kaushik said...

Can you tell me how to install this widget in the side-bar instead of the header ?

Vijay Aswani [VSA1977] said...

Hey, this is a great post. I have been looking all around for a simple implementation for the Label Cloud. And this one works wonders.

What really impressed me was the ability to change the font size, color and also the count.

Great job.
VJ @

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

hi there, i've added this widget but it only displays as a line list instead of a cloud... any ideas on how to fix this? i originally used the code from phydeaux but that didn't display anything at all, only the title. please help as i'm very frustrated. thanks in advance.


Anonymous said...

Day night,gold für wow the moon or on world of warcraft gold the tree,cheap wow gold Hao Jie pouring down the moonlight, as if accompanied by Xiaotu Feifei enter sweet dreams. In the dream, a dream Feifei about his sister to the moon night. Will open the door,wow gold kaufen go down the moon sister.mesos Xiaochanzouxia take is that they did not see the moon sister. At that time, anchored at the tree on the moon sister saw Xiaochan, they yelled loudly: "Feifei, Feifei, I tree, the tree, I." Xiaochan sit at the moon to his sister, who Daizhaoxiaochan came wow geld to the beautiful pond. Only, water,maple story mesos everywhere in the lush leaves and beautiful flowers.maple story items A frog squatting lotus leaf, see Xiaochan, surprised and said: "Xiaochan,wow gold farmen you can even sit on the moon. You simply It's amazing!maple story money I am sure that you are the first animals to the moon by the animal. good,wow leveling I envy you!Maple Story Accounts "Xiaotu listening, happy to smile. Then, with the moon sister Xiaotu to its home.powerlevel Only, the moon sister's home stars are everywhere. The eyes of a star a Zha Zha,world of warcraft power leveling like Xiaotu greeted the arrival of a mouth, like: "Xiaochan, Hello, we at the Moon Palace waiting for your arrival."maple story powerleveling Xiaotu listened,archlord gold smiling all of the 1930. Finally, the moon Xiaotu sister back home, also pleased to Xiaochan said goodbye. Xiaochan also pleased to the moon sister said: "The Moon sister Goodbye! You bring me to this night. Dainiqu next time I visit some of ourforests."

Hannes said...

works great, thanks a lot! easy to change colors, etc, great work!

if you want to see the result:

Chanaka said...

Finally found a working code for Blogger Label Cloud. It's working fine on
Thank you very much !

ersie said...

Yeah, just what I wanted. Thank you!

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Thank you just had to increase the values for a black background on...

var minColor = [0,0,0]; perfect with no 3rd party links.

Paste second code over header section and delete other label1 id from sidebar and all labels are now your new header delete title of label1 to remove title Label Cloud above labels

Thank you
Static Hound

gheumma said...

Thanks... I use it in my blog..

SatuPersen said...

Thanks... I use it in my blog..

Anonymous said...

At one time or another, I do not have the Atlantica online Gold ; at the first time, I am not willing to buy Atlantica Gold . But I do not wonder I buy the Atlantica online money , my friend thinks that I am ill. But when I have it, it carries the magic from such a group, such a link in the world, cheap Atlantica online Gold , it is the key bring you to this world. But buy Atlantica online Gold is the best desire that I make.

Without thinking I buy some dofus kamas . I use some kamas and want to find a good group. We often buy cheap kamas together on Monday. As if it is a rule. I think it is the real friendship. buy dofus kamas is already become the essential thing in my life. So I will introduce my friends have the dofus gold , we can be consist of a group, it must be very interesting.

Blackswan said...

Found your excellent blog & tried to install the codes but got this error msg. Pls advise...

"More than one widget was found with id: Label1. Widget IDs should be unique".

dofus kama said...

Now do you worried about that in the game do not had enough cabal online alz to play the game, now you can not worried, my friend told me a website, in here you can buy a lot cabal alz and only spend a little money, do not hesitate, it was really, in here we had much cabal gold, we can sure that you will get the cabal money, quick to come here to buy cabal alz.

I like play online game, I also buy dofus kamas and kamas, the cheap kamas is very cheap, and use the dofus gold can buy many things, I like dofus kama, thanks, it is very good.

Anonymous said...

I'm clueless when it comes to coding. I installed the widget following your instructions and it seems to work, however it appears on the center bottom of the page. Is there any way to change its position?

逆円助 said...


精神年齢 said...


Anonymous said...

if wow gold and maple story mesos wow gold

メル友募集 said...

最近仕事ばかりで毎日退屈してます。そろそろ恋人欲しいです☆もう夏だし海とか行きたいな♪ 連絡待ってるよ☆

動物占い said...


家出 said...


セレブラブ said...


Anonymous said...

無料 出会い 競馬予想 無料 競馬予想 競馬予想 無料 競馬予想 無料 競馬予想 無料 近視 手術 メル友 出会い 出会い 出会い 出会い メル友 メル友 人妻 メル友 ギャンブル依存症 AV女優 無料 出会い 出逢い 掲示板 出会い系 無料 出会い 人妻 出会い 人妻 出会い セフレ 人妻 出会い セックスフレンド メル友 出会い SM 愛人 不倫 セフレ 無料 出会い 出会い系 無料 無料 出会い 富士山 写真 富士山 メル友 無臭性動画 カリビアムコム 一本堂 出会い 人妻 セックスフレンド ハメ撮り エッチな0930 メル友 無料 出会い 無料 出会い セフレ セフレ セフレ セックスフレンド セックスフレンド セックスフレンド 人妻 出会い 人妻 出会い 人妻 出会い 出会い系 出会い系 出会い系 カリビアンカム カリビアンカム

夏フェス!! said...

夏フェス一緒に行ってくれる人募集!!夏の思い出一緒につくろぉ☆ 連絡してね♪

無料ゲーム said...


素人 said...


出会い系 said...


逆援助 said...


友達募集 said...


家出 said...


人妻 said...


素人 said...


友達募集中 said...


Anonymous said...


Anonymous said...

ダイエット サプリ
レストラン ウェディング
ダイエット 比較
競馬 ゲーム
格安 SEO
クレジットカード 現金化
FX 比較
クリスマス プレゼント

Anonymous said...

吉原 ソープランド
すすきの ソープランド
新宿 ソープランド
千葉 ソープランド
埼玉 ソープランド
神奈川 ソープランド
吉原 ソープランド
風俗求人 高収入
都内 キャバクラ 全額日払い
大阪 風俗
大阪 風俗
神戸 風俗
神戸 風俗
風俗 求人
風俗 求人
デリヘル 新宿
デリヘル 東京
東京 デリヘル
渋谷 デリヘル
池袋 デリヘル
千代田区 デリヘル
台東区 デリヘル
墨田区 デリヘル
中央区 デリヘル

Anonymous said...

和歌山 デリヘル
神戸 デリヘル
姫路 デリヘル
大阪 デリヘル
京都 デリヘル
大阪 デリヘル
神戸 デリヘル
和歌山 デリヘル
奈良 デリヘル
京都 デリヘル
神戸 デリヘル
姫路 デリヘル
奈良 デリヘル
京都 デリヘル
大阪 デリヘル
大阪 デリヘル
神戸 アルバイト
福原 ソープ

Anonymous said...

和歌山 デリヘル
神戸 デリヘル
姫路 デリヘル
大阪 デリヘル
京都 デリヘル
奈良 デリヘル
大阪 デリヘル
神戸 デリヘル
和歌山 デリヘル
奈良 デリヘル
京都 デリヘル
神戸 デリヘル
姫路 デリヘル
和歌山 デリヘル
奈良 デリヘル
京都 デリヘル
大阪 デリヘル
南大阪 デリヘル
大阪 デリヘル
神戸 風俗
神戸 アルバイト
三宮 アルバイト

Anonymous said...

池袋 風俗
渋谷 風俗
新宿 風俗
av 写真
アダルト ブルーレイ
SM 通販
大規模修繕 工事
FX ランキング
クレジットカード 申込

Anonymous said...


Anonymous said...


Anonymous said...


Anonymous said...


Anonymous said...


Ivana Angel said...

it works! ty so much.... :)
love it.. see my blog

Seo Tips said...

Great stuff! It really helps to add this widget on my blog. Thanks for sharing.

purchase viagra said...

viagra prescription
purchase viagra online

Anonymous said...

酒店打工 酒店兼職
台北酒店 打工兼差 酒店工作 禮服酒店
酒店兼差 酒店上班 酒店應徵 酒店 酒店經紀

Anonymous said...


Shareware zoo said... offers you the best video converter reviews, video converter ratings, dvd ripper ratings to help you deal with your multimedia problems.
Video Converter
Mac Video Converter
DVD Ripper
DVD Creator
DVD Copy
iPhone Ringtone Converter
iPad Video Converter
iPod Video Converter
Blu-ray Ripper

buy viagra online said...

Hi, thank you for sharing this great info. Was just browsing through the net in my office and happened upon your blog. It is really very well written and quit comprehensive in explaining with a very simple language.

best price viagra name brand online said...

Your blog is outrageous! I mean, Ive never been so entertained by anything in my life! Your vids are perfect for this. I mean, how did you manage to find something that matches your style of writing so well? Im really happy I started reading this today. Youve got a follower in me for sure!

Anonymous said...

buy alprazolam know your high xanax - buy xanax online spain

jerry john said...

Games created in Sploder™ are 100% Flash — a plugin that is on 98% of all computers on the internet. That means you don't need any special software to view fluid-motion, dynamic games, and neither do your friends or family. You can even download your games and post them on your own commercial web site. bingo

Anonymous said...

There are few things that get my attention in a level beyond Call of Duty or Max Payne 3, the upcoming Family Guy online game is one of these things. A lot of people criticize Family Guy because they say it is too much like The Simpsons, but I don't think that's true, Family Guy offers a whole other level of black humor Website

Anonymous said...

I all the time used to read post in news papers but now as I am a user of net therefore from now I am using net for
articles or reviews, thanks to web.
My blog :: online slots money

Anonymous said...

Excellent pieces. Keep writing such kind of info on your site.
Im really impressed by your site.
Hey there, You've done a fantastic job. I'll definitely digg it and for my part recommend to
my friends. I'm sure they will be benefited from this web site.
my web site - usa online slots

Anonymous said...

We are a bunch of volunteers and starting a brand new scheme in our community.
Your site provided us with useful information to work on.
You've performed an impressive job and our entire community will probably be grateful to you.
Feel free to surf my blog post ; Real Online Slots