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.

> Tạo Tag Cloud (Label) Dạng Flash Trên Blogspot

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&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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
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:&quot;&quot; !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é. Nếu bạn thích thú với Thủ thuật trên bạn có thể comment cám ơn hoặc có nhã ý cám ơn tác giả thì bạn hãy click vào quảng cáo trên Blog này nếu thấy có sản phẩm quảng cáo phù hợp với bạn.

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.