สร้าง Tag Cloud ให้มีสีสันสวยงาม

เรื่องก่อนหน้าเกี่ยวกับ การเปลี่ยนป้ายกำกับ(Lable) ให้เป็น Tags Cloud จะมีเป็นสีเดียวแต่ใช้ขนาดตัวอักษรที่แตกต่างกัน สำหรับการสร้าง Tag Cloud ให้มีสีสัน เราจำเป็นต้องลบ Tag Cloud ก่อนหน้านี้ไปก่อน แต่อย่าลืมทำการ backup template ไว้ด้วยก็แล้วกัน

ข้อจำกัดที่ผมยังไม่สามารถแก้ไขได้ในตอนนี้ก็คือ ยังมีปัญหาในการแสดงผล Tag Cloud ที่เป็นภาษาไทย จะใช้ได้เฉพาะที่เป็นภาษาอังกฤษเท่านั้นในตอนนี้ ดูรูปตัวอย่างกันก่อน

ขั้นตอนการสร้างมีดังต่อไปนี้

ขั้นตอนที่ 1 ไปที่ รูปแบบ|แก้ไข HTML แล้วเลือกขยายแม่แบบเครื่องมือ (Layout|Edit HTML -> check the "Expand Widget Templates" check box)

ขั้นตอนที่ 2 ค้นหาโค๊ด ]]></b:skin> แล้ววางโค๊ดต่อไปนี้ไว้ด้านบน

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

ขั้นตอนที่ 3 วางโค๊ดต่อไปนี้ไว้ด้านล่างโค๊ด ]]></b:skin> หรือก่อนหน้า </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>

ขั้นตอนที่ 4 ค้นหาโค๊ด <b:widget id='Label1' locked='false' title='Labels' type='Label'/> หรือหาแค่โค๊ด <b:widget id='Label1' บางบล็อกอาจเป็น <b:widget id='Label2' แล้วทำการลบโค๊ดตั้งแต่บรรทัดที่เจอไปจนถึง </b:widget> และใช้โค๊ดต่อไปนี้แทนที่

<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&gt;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 = &quot;<data:label.name/>&quot;;

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] &lt; cloudMin){

continue;

}

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>

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

ขั้นตอนที่ 5 ทำการบันทึกแม่แบบ

การปรับแต่ง
var cloudMin= 1; ค่าปรกติ คือ 1 จะแสดงผล Label ทั้งหมด ถ้าใส่เป็นค่าอื่น เช่น 5 จะแสดงผล 5 Label

var maxFontSize = 20; ขนาดตัวหนังสือใหญ่สุดของ Label ที่มีบทความมากที่สุด
var maxColor = [0,0,255]; ตั้งค่าสีมากสุด
var minFontSize = 10; ขนาดตัวหนังสือเล็กสุดของ Label ที่มีบทความน้อยที่สุด
var minColor = [0,0,0]; ตั้งค่าสีน้อยสุด
var lcShowCount = false; ถ้าต้องการให้แสดงจำนวนบทความด้วยก็ให้เปลี่ยนเป็น "True"

ถ้าต้องการให้มีสีสันเหมือนในตัวอย่างก็ให้เปลี่ยนค่าสีดังนี้

var maxColor = [224,110,30];

var minColor = [115,119,188];