Tạo Label Cloud đơn giản cho Blog

[Info Tech] Đây là đoạn code và thông tin setup dành cho việc tạo Label Cloud trong Blogger. Dĩ nhiên là trước tiên bạn phải có một blog trên Blogger và bạn phải sử dụng layout template. Tiếp theo đó bạn phải có sẵn phần Label. (Phải có ít nhẫn một nhãn với nhiều hơn một entry để có thể sử dụng thủ thuật này.)

Chắc chắn là bạn đã backup template của mình trước khi thay đổi bất kỳ thứ gì.
Log into Blogger and go to your layouts section. On the 'Page Elements' setup page
Đăng nhập Blogger và chọn phần Layout. Trên 'Page Elements' đảm bảo là bạn đã có phần Label được install ở nơi mà bạn muốn và chúng có thể bị di chuyển vòng quanh sau đó.

Đi tới phần Edit HTML và không tick phần widget expanded.

Code sẽ được chia làm ba phần. Một phần dành cho stylesheet, một phần dành cho cấu hình, và một phần dành cho chính widget này.
The first part to put in is the stylesheet section. The following code needs to be copied
Đầu tiên là đặt code vào trong stylesheet của bạn. Copy đoạn code sau và thêm vào phần stylesheet trong phần laypout, được đánh dấu bởi tag <b:skin>

Dễ dành nhất là đi tìm tag sau:

]]></b:skin>

Sau đó đặt đoạn code ngay trước tag trên.

Đây là đoạn code để thêm vào:

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

Tiếp thep là phần cấu hình cho Label Cloud. Tìm đoạn tag sau:

]]></b:skin>

Nhưng lần này đặt đoạn code ngay sau dòng trên nhưng trước tag </head>. Đây là đoạn code:

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

Thiết lập trên có thể được thay đổi nhưng nếu cần hãy comment, tôi có thể giải thích thêm. Nhưng phần mặc định sẽ hoạt động ngay bây giờ.

Giờ là đến phần widget. Kéo xuống và tìm Label widget trong sidebar của bạn. Nó sẽ trông như thế này:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Copy đoạn code sau và thay thế cho dòng trên.

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

Bây giờ thì bạn đã làm xong và các bài đăng của bnạ đã được dán nhãn. Hãy preview để xem phần Label Cloud của bạn hoạt động ra sao. Nêu nó không xuất hiện, chắc có gì không ổn, hãy làm lại từ đầu.

Có gì thắc mắc, xin bạn để lại lời nhắn.

Misshaudau