Thêm Animated Label Cloud Blogumus cho Blogger

[Info Tech] "Blogumus" là một loại tag cloud widget khá thú vị. Chính vì thế, khi nhìn thấy nó, tôi muốn tìm hiểu cách làm ngay lập tức. Khi di chuyển trỏ chuột bạn sẽ thấy animation xuất hiện. Trong bài này tôi sẽ giải thích ngắn gọn cách thêm Tag Cloud này vào trong Blog của bạn.












Bước 1: Đi tới Blogger Layout của bạn -> Page Elements, sau đó thêm Label Widget vào trong template.



Chọn phần sorting Alphabetically.

Bước 2: Sau khi thêm Label Widget, đi tới Layout -> Edit HTML (Không chọn Expand the widget templates), bạn sẽ thấy 1 đoạn code tương tự như sau:

<b:widget id='Label2' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Thêm vào ngay sau dòng này đoạn code sau:

<b:widget id='Label1' 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'><center>

<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> | Distributed by <a href='http://blogger-templates-designs.blogspot.com/'>Blogger Templates Designs</a></div>
<script type='text/javascript'>
var so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", <!-- width="240" -->
"300", "7", <!-- height="300" -->
"#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>

<b:include name='quickedit'/></center>
</div>
</b:includable>
</b:widget>

Khi bạn preview template. Nếu thiết lập đúng bạn sẽ thấy tag cloud xuất hiện ngay ở sidebar.

Bạn có thể thay đổi màu sắc cũng như size của label cloud.

Xem thêm tại: http://xogirl.blogspot.com

Chúc thành công.

Misshaudau