Thủ thuật tạo Tag/Label Cloud cho Blogger

Tag cloud hay còn gọi là label cloud trong blogger là một danh sách bao gồm tất cả các nhẫn Label sử dụng trong blogger được hiển thị theo style mang đậm tính “mỹ thuật”. Kỹ thuật Tag Cloud mà tôi hướng dẫn các bạn thực hiện trong bài viết này được phát triển bởi phydeaux3. Các bạn có thể tham khảo thêm về kỹ thuật này.

Dưới đây là hình ảnh của Tag Cloud mà tôi sử dụng:

Để thực hiện tạo Tag Cloud các bạn làm theo hướng dẫn sau:

Trước tiên bạn Truy cập vào Blogger Layout > Page Elements page và thêm tiện ích Labels Widget.

Trong Labels Widget bạn lựa chọn sort the labels Alphabetically.

Sau đó vào Layout > Edit Html (không chọn expand the widget templates để dễ dàng thực hiện hơn)

Sau đó tìm kiếm (Ctrl+F) đoạn mã tương tự đoạn mã dưới:

<b:widget id='label1' locked='false' title='labels' type='label'/>

Thay thế chúng bằng:

<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudmin = 1;
var maxfontsize = 25;
var maxcolor = [0,255,0];
var minfontsize = 10;
var mincolor = [0,0,0];
var lcshowcount = false;
// 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';
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>
</p>
<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>
<br/>powered by:<small><a href='http://www.vnpressnet.com'>blogger widgets</a></small>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tìm kiếm đoạn mã:

]]></b:skin>

Thêm vào phía trước (trên) đoạn mã đã tìm trên bằng đoạn mã dưới:

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

Bạn lưu lại mẫu và xem tác phẩm Tag Label Cloud trên blog của bạn xem thế nào nhé.

Chúc các bạn thành công!