在blogger 加入一個會轉動的標籤雲(animated label cloud)

Share

文章以標籤雲方式呈現, 原本就有一種不一樣的視覺效果, 現在還有一種是會動的標籤雲. 這個原本是wordpress 的插件, 現在在blogger上也可以有這樣的動態效果.


首先, 先到版面配置 --> 修改HTML --> 打勾展開小裝置範本.

1.找到 <b:section class='sidebar' id='sidebar' preferred='yes'> 這行, 在之後加入下列程式碼.
<b:widget id='Label99' 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'>AmandaFazani</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", "360", "300", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "75");
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>
點圖片,可放大檢視.


2. 有些參數可以自訂, 如標籤雲的寬度,長度,字體大小及顏色等, 請參考附圖說明.


3. 儲存後, 就可看到像雲一樣飄移的標籤雲了. 當滑鼠移到上方時, 標籤雲會轉動, 點選某一個標籤時,就會出現方框, 一按下去就可以進入該標籤的所有文章了.


馬上來試看看效果. ^^

參考來源: How to Add flash Animated label cloud Blogumus for Blogger

相關文章 :