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'>
    <h2><data:title/></h2>
    </b:if>

    <div class='widget-content'>
    <div id='labelCloud'> <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul></div>
    <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){
    if(a>b){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    }
    else{
    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;<data:label.name/>&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++) {
    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
    }
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li');
    li.style.fontSize = fs+'px';
    li.style.lineHeight = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t;
    a.style.color = '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';
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    }
    else {
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
    ul.appendChild(li);
    abnk = document.createTextNode(' ');
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    </script>

    <b:include name='quickedit'/>
    </div>

    </b:includable>
    </b:widget>
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.

85 comments:

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

http://quotesblog.blogspot.com/
http://danieljohnsonjr.com/
http://journeyinsidemymind.com/

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

Zia said...

Thanks this is fantastic!

the_donn said...

Gidday

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.

tbb 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...

Hi,

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.

Thx

f 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?
Thanks

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: http://fos-ilaron.blogspot.com

Congratulations.
Excuse my poor english.
ilaron

Anonymous said...

great job
i installed the same on
http://tech.rcanblog.com
http://www.rcanblog.com

Cher 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). http://uggerholt.blogspot.com

Kim Wheedleton said...

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

Anonymous 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...

tia.
http://it.dennyhalim.com

Peach said...

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

Anonymous said...

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

Stephanie Anthony/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.

Stephanie Anthony/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 =/

Anonymous said...

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

NeverMind 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...

NeverMind said...

you can check what I mean at http://jaigahlot.blogspot.com/

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: http://mooimuziek.blogspot.com/.

Thanks!

Regards,
Mattijs

Ty said...

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

Anonymous said...

hi


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

Anonymous said...

thanks i have used it for my www.sirigandha.com

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!

Kevin Atkins said...

Thanks for this. it worked a treat on my blog
http://velocenews.blogspot.com

Kevin Atkins 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 @ http://www.smart-technology-guru.com

Anonymous said...
This comment has been removed by the author.
Anonymous said...
This comment has been removed by the author.
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.

steve

www.thatrealness.blogspot.com

Anonymous said...

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

if you want to see the result: http://betterworldthinking.blogspot.com/

Chanaka said...

Finally found a working code for Blogger Label Cloud. It's working fine on http://freemp3club.blogspot.com
Thank you very much !

ersie said...

Yeah, just what I wanted. Thank you!

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

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

var minColor = [0,0,0];

...works 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
MrJJ
Static Hound

gheumma said...

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

SatuPersen said...

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

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".

http://luxuryhaven.blogspot.com

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...

みんなの精神年齢を測定できる、メンタル年齢チェッカーで秘められた年齢がズバリわかっちゃう!かわいいあの子も実は精神年齢オバサンということも…合コンや話のネタに一度チャレンジしてみよう

メル友募集 said...

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

動物占い said...

あなたの性格を、動物に例えて占っちゃいます。もしかしたらこんな動物かも!?動物占いをうまく使って、楽しい人間関係を築いてください

家出 said...

家出中の女性や泊まる所が無い女性達がネットカフェなどで、飲み放題のドリンクで空腹を満たす生活を送っています。当サイトはそんな女性達をサポートしたいという人たちと困っている女性たちの為のサイトです

セレブラブ said...

セレブ女性との割り切りお付き合いで大金を稼いでみませんか?女性に癒しと快楽、男性に謝礼とお互い満たしあえる当サイト、セレブラブはあなたの登録をお待ちしております。

Anonymous said...

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

夏フェス!! said...

夏フェス一緒に行ってくれる人募集!!夏の思い出一緒につくろぉ☆ megumi-0830@docomo.ne.jp 連絡してね♪

無料ゲーム said...

あなたのゲーマー度を無料ゲーム感覚で測定します。15個の質問に答えるだけの簡単測定で一度遊んでみませんか?ゲームが得意な人もそうでない人もぜひどうぞ。

素人 said...

Hな女性たちは素人ホストを自宅やホテルに呼び、ひとときの癒しを求めていらっしゃいます。当サイトでは男性ホスト様の人員が不足しており、一日3~4人の女性の相手をするホストもおられます。興味を持たれた方は当サイトにぜひお越しください

出会い系 said...

実は出会い系には…関係者用入り口があるのを知っていますか?広告主やスポンサー用に用意されたIDではサクラや業者が立ち入ることが出来ないようになっているのです。当サイトでは極秘に入手した関係者用URLが公開されています

逆援助 said...

男性はお金、女性は快楽を得る逆援助に興味はありませんか?お金を払っても性的欲求を満たしたいセレブ達との割り切り1日のお付き合いで当サイトでは大金を得ることができます。無料登録なのでアルバイト感覚でOK、詳しくはTOPページでどうぞ。

友達募集 said...

ホムペ完成記念!私の事みんなに知ってもらいたくて頑張りましたぁ。色々とご感想をお待ちしているので思った事を意見してください。メアドはほむぺにのせてありますぅ!★ fan.jna@docomo.ne.jp

家出 said...

夏休みで気軽に家出する女子○生が急増しています。しかし家出したはいいものの泊る所やお金が無い彼女たちは、掲示板などで泊めてくれる男性を探す子も多いようです。当掲示板にも夏休みに入ってから通常の3倍以上のメッセージが寄せられています

人妻 said...

今最もアツイバイトは人妻とのセフレ契約です。当サイトではお金を払ってでもセフレがほしい人妻が集まり、男性会員様との逆援生活を待っています。当サイトで欲求不満の女性との出会いをしてみませんか

素人 said...

素人ホストでは、男性のテクニック次第で女性会員様から高額な謝礼がもらえます。欲求不満な人妻や、男性と出会いが無い女性達が当サイトで男性を求めていらっしゃいます。興味のある方はTOPページからどうぞ

友達募集中 said...

少し魅惑な自分をネットだから公開してみました。普段言えない事など、思い切って告白しているプロフなので興味ある方はぜひ除いてみてください連絡待ってまぁす。 hinyaaaaa@docomo.ne.jp

Anonymous said...

池袋 風俗
渋谷 風俗
新宿 風俗
アダルトDVD
av 写真
アダルト ブルーレイ
アダルトショップ
ペニス増大
電マ
TENGA
SM 通販
メンズセクシー下着
男性用下着
Tバック下着
大規模修繕 工事
決済代行
SEO
SEO
花植物大図鑑
決済代行
FX ランキング
クレジットカード 申込
子猫
子犬
仔猫
アダルトショップ
アダルトグッツ
ゴールドカード年会費
ダッチワイフ

Ivana Angel said...

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

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

Shareware zoo said...

Video-X-Ware.com 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!

Unknown 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

Anonymous said...

、の遊び方1.体験ユーザどうか決定5.連れ出しホテルへく、姫が入室がない、、、ということで、こりゃ~2日いるわ、、、ということで、また、こそこそっと、早めに来ちゃいましたDKの応酬(おうしゅう)からスタート。うん、もう勝ち確定ですな。(台湾風俗笑)その後セクキャバと 略します)「Vivid Crew」が、 以前、旧ホテヘル「努(おんなまたぢから)」 をやっていたものの、お店の運営上の問題もあったのか、自己崩壊してしまいました。 今回は、待ち合わせ型デリヘルということで、業態変更で台湾式 超遊 台北遊 アジア マッサージ 台北夜世界

Anonymous said...

局長室淫亂!週刊爆劈腿逼墮胎 丁允恭請辭
總統府發言人丁允恭的前女友Y女向週刊爆料丁訂婚後劈腿多女,且逼她墮胎。酒店經驗
更令人咋舌的是,Y女透露,丁擔任高雄市政府新聞局長時與當時擔任電視台記者的她交往,丁常利用上班時間在局長室與她發生

Anonymous said...

楊志良捷運口罩脫一半舊照瘋傳 網:原來這是他的SOP

前衛生署長楊志良被翻出去年9月搭捷運時,口罩脫下一半講電話照片,遭到網友圍剿。 圖:翻攝自「我不綠,只是堵藍」臉書
[新頭殼newtalk] 「現世報」?才重砲批評照顧武漢肺炎病患的醫師造成防疫破口,應該開除的前衛生署長楊志良,自己就被翻出1張在台北捷運車廂裡脫口罩講電話照片,酒店消費
遭到網友圍剿。臉書「我不綠,只是堵藍」粉專還找出照片拍攝時間,是去年(2020)的9月,質疑他造成防疫破口;「迷因力量」也指楊把口罩脫到下巴的可能污染區,喊「拜託先學會戴口罩的SOP」。
楊志良日前因為批評衛生福利部立桃園醫院醫師沒有遵守SOP,才會染疫造成防疫破口,揚言應該開除該名染疫醫師,並砲轟疫情指揮中心「雙重標準」,幾乎惹怒全國。
沒想到,楊志良自己的1張舊照被翻出,照片裡他把口罩脫到脖子部分,正在以手機通話。「我不綠,只是堵藍」粉專表示,照片是在台北捷運上拍到,依照楊志良背後的捷運廣告推斷,拍攝時間應該是去年的9月期間,因為去年9月1日至30日,北捷正在舉行「尋找捷運常客」活動,楊背後的廣告正是該活動宣傳。
照片一出,在網路瘋傳,網友痛批楊志良也是「防疫破口」,有人說「先檢舉他讓他罰款再說」,有人酸「原來這就是他的SOP」。據了解,台北捷運自去年4月起,就強制搭乘旅客必須全程戴好口罩。
「迷因力量」粉專也砲轟,表示如果照片是真的,這位國民黨公衛專家已是防疫破口,又有什麼資格指責確診醫師,嗆要處罰開除?該粉專並引用專家說法指出,楊志良不但在捷運密閉空間脫下口罩講電話,還把口罩脫到下巴的可能污染區,「說一套做一套,嚴以律人,爛以待己」,嗆楊志良「拜託先學會戴口罩的SOP,再來跟大家說你是台大公衛專家」。
網友大罵很想知道楊志良要開除染疫醫師的邏輯,他要怎麼處置自己?R網友批連一個口罩都不會戴,談什麼公衛專家;N網友問台北捷運局不開罰嗎?C網友喊「快開除這不良旅客」