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

Thông thường từ trước tới nay chúng ta thường ít nhìn thấy các Tag Cloud ở các blog của Blogger.com

Tag Cloud để hiện thị các thẻ được sử dụng nhiều nhất. Thông thường các thẻ tag hay labels nào in đậm và to là thẻ được yêu chuộng nhất và chắc chắn có nhiều người sử dụng hoặc tìm kiếm nó nhất hay có nhiều bài liên quan nhất.

Các thẻ này đều ở dạng tĩnh, không phải động, tuy nhiên hiện nay ở một số blog của worldpress có các thẻ tag cloud dạng động nhìn rất sinh động. Tìm kiếm mọi các dữ liệu, search trên mạng rất lâu tôi mới tìm được bài hướng dẫn tạo Tag Cloud (Label) dạng Flash trên Blogspot.

Thẻ Tag Cloud dạng động này được gọi là "Blogumus". Là một tag dạng Flash widget được convert bởi Amanda từ nguồn plugin dành cho Wordpress của tác giả Roy Tanck .

Trong bài viết này tôi xin hướng dẫn bạn cách thực hiện theo chỉ dẫn của Amanda, hy vọng các bạn sẽ có một Tag Cloud Flash đẹp mắt và quyến rũ cho blogspot của mình.

Các bước tiến hành để tạo Tag Cloud Label dạng Flash cho blogspot.

Để tạo Blogumus vào trong Bố cục (Layout) Blogger của bạn rất đơn giản! Bạn chỉ cần sao chép và dán một phần của mã vào mẫu Blogger của bạn, trong quá trình tạo, tuỳ thuộc vào màu sắc của Blog hiển thị bạn cần chỉnh sửa thủ công một số chi tiết. Sau đây là các bước cần thiết để cài đặt Blogumus trong Blogger của bạn:

1. Vào Bố cục (Layout)> Chỉnh sửa (Edit) HTML trong Bảng điều khiển Blogger của bạn, và tìm kiếm dòng lệnh sau (hay tương tự):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Sau đó chèn dòng lệnh sau vào ngay dưới:

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

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Xong việc bạn Preview để xem mẫu mà bạn vừa chỉnh sửa. Bạn có thể lựa chọn vị trí để đặt Tag Cloud hoặc màu sắc của nền, màu chữ sao cho thẩm mỹ.

Hướng dẫn thay đổi màu nền, màu chữ và kích thước chữ hiển thị trong Tag Cloud.

Tùy biến Blogumus theo ý bạn:

Như mặc định, mã code nêu trên cung cấp cho bạn Blogumus Widget Flash có kích thước và màu sắc như sau:

Chiều rộng: 240px
Chiều cao: 300px
Màu nền: Trắng
Màu font chữ: Xám Đen
Kích thước font chữ: 12

Bạn có thể thay đổi từng các biến trên để phù hợp với Blog của mình.

Hiệu chỉnh độ rộng và chiều cao Các biến biểu thị độ rộng và chiều cao được thể hiện như trong đoạn mã sau:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Độ rộng hiện tại là 240 được thể hiện bằng màu đỏ ở trên, chiều cao được thể hiện bằng màu xanh có giá trị hiện tại là 300. Các biến này được biểu thị bằng đơn vị pixel. Các bạn có thể tùy biến các giá trị này tùy ý.

Hiệu chỉnh màu của background , cũng như vậy bạn có thể tùy biến thay đổi màu của background mặc định màu trắng thành các màu theo bảng mã hex :

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Ví dụ bạn muốn thay màu background thành màu đỏ sáng thì bạn thay thế #ffffff thành #ff0000.

Hiệu chỉnh màu của text Mặc định màu của text là màu Xám đen( hex value #333333). bạn thay thế giá trị này bằng màu mà bạn lựa chọn trong dòng mã lệnh sau:

so.addVariable("tcolor", "0x333333");

Hiệu chỉnh kích thước font size Kích thước mặc định là 12, bạn tìm đến đoạn code sau và sẽ tìm nhìn thấy chữ số 12 và thay nó bằng kích thước bạn thích.

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Bạn hãy ngắm tác phẩm Label bên cạnh, tác phẩm được thực hiện bời proAMATEUR trên nguồn dữ liệu của chị Amada.

Nguồn dữ liệu : http://www.bloggerbuster.com