วันเสาร์ที่ 11 เมษายน พ.ศ. 2552

[ blogger ] how to replace a old label with tag cloud

As recommended in this, here is an abbreviation steps.

First, replace old Label, with a new one.

// old Label
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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>
</b:includable>
</b:widget>


// new Label
<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'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
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 c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > 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>

<noscript>
<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>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>


Second, put CSS after ]]></b:skin>
( Note that some template has a problem with b:skin, so it's better to put it outside )

<style>
/* Tag 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}
</style>


Third, insert javascript configuration about color before </head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

How to use thai language

From code above, there is a problem about displaying tag in other language, for instance Thai language ( ภาษาไทย ),

Here is my solution, Just changing from

a.appendChild(document.createTextNode(t));


to

a.innerHTML = t;


and everything wokring fine.

แก้ให้แล้วน้ะจ้ะ ใช้ภาษาไทยได้แล้วนะ

6 ความคิดเห็น:

Admin BclubThai กล่าวว่า...

ใส่แล้วยังเป็นภาษาต่างดาวอยู่เลยอ่ะครับ แก้ให้หน่อยอ่ะครับ

dsin กล่าวว่า...

เปลี่ยนเป็น innerHTML หรือยังอ่ะคับ ?

Panu กล่าวว่า...

Hi Khun dsin krub,

It would be fantastic if you could help krub, is it possible to change the font colour when I 'hover' with the mouse?

I had already changed the font and background but really want to change the font's colour when I hover over it...

Kob Kun mak mak krub.

dsin กล่าวว่า...

edit this line krub

#labelCloud a:hover{
text-decoration:underline
}

add "color: [color code]"

for example,

#labelCloud a:hover{
text-decoration:underline;
color: #FF0000;
}

Panu กล่าวว่า...

Kob Kun mak mak krub, just found out today that Blogger has just upgraded its 'label' widget, it can now do cloud as well krub, but still not as good as what I am using krub.

Many thanks once again.

dsin กล่าวว่า...

never mind krub ^^

LinkWithin

Related Posts Plugin for WordPress, Blogger...