2008/11/15

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




文章以標籤雲方式呈現, 原本就有一種不一樣的視覺效果, 現在還有一種是會動的標籤雲. 這個原本是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

相關文章 :

31 comments:

懶得理你 提到...

很炫
只是考慮到實用性的話
當標籤很多時就很難點選

marrowalk 提到...

這種東西不支援中文標籤,安裝請三思!

匿名 提到...

wow! 好華麗的畫面XD,挺適合像我這樣tag沒有很多的人兒! 謝謝你的分享!

Skyvee 提到...

這個炫,不過有兩個問題, 一個就是標籤多時,會拖慢速度,二是marrowalk提到的中文,無法顯示. 真可惜!

kjpiece 提到...

之前在一些英文Blogger有看到過,真的很炫,曾經想要安裝,不過後來考慮到實用性,就沒有使用囉XD

Skyvee 提到...

kjpiece,如果標籤不多,速度別這麼慢,其實視覺效果還不錯.不過不支援中文,對很多中文部落格來說,實用性就不高了.

aderpeggy 艾德 提到...

我不能用ㄟ

為甚麼??

skyvee 提到...

艾德你好,我不知道你遇上了什麼問題,如果你能提供多一些資訊?

Zeason 提到...

不知道為什麼只能在首頁顯示

skyvee 提到...

我測過,每一頁應該都會顯示,是不是查一下 你的原始碼中 sidebar 有出現好幾個?

Zeason 提到...

说起来好像是.........

Dori 提到...

謝謝分享,這功能真的很炫~

另外想請問,我有五個標籤,可是標籤雲只出現四個轉來轉去,請問您知道問題在哪嗎?

skyvee 提到...

是哪一個標籤沒出現?中文或是 該標籤文章數只有一個?

EverDark 提到...

我發現我的標籤一定會漏一個沒有出現。(當我有五個的時候他只有四個在漂,當我便六個的時候他只有五個XD)而且不是特定哪一個會漏掉,有時後沒有A、有時候則是沒有B。請問不知道是否有解決方案?謝謝!

LaokongLeong 提到...

我按你的做法做完之后,什麼都沒有發生過....這是什麼回事??

匿名 提到...

這是中文支援 但是奇怪的是 我的中文指出現 □ 這種符號...
我之前有看過一個人的blogger有成功顯示中文但我忘記網址了...shit...

http://evocms-plugins.svn.sourceforge.net/viewvc/evocms-plugins/flash_tag_cloud_plugin/lang/

Skyvee 提到...

EverDark 關於標籤雲漏掉的問題,我也不清楚哩..因為後來沒有再深入研究了.也許你可以問問script的原始作者?

LaokongLeong, 我看你的原始碼也沒見到該script,所以我也不知發生了什麼事?

不支援中文,不過從script裡, 如果加入中文轉碼的語法,應該就能解決了.

EverDark 提到...

嗯嗯,在原作者的網頁中也有人提到missing label的問題,不過好像還沒得到解決。我自己再想辦法看看 @_@ 感謝回應~

skyvee 提到...

EverDark很細心,居然會發現每次missing的label不一樣, 如果標籤數很多,這點還真不容易發現,希望能早點解決.

Mandy 提到...

很喜欢这个效果。不过我按你说的设置之后,和16楼一样,首页什么反应都没有,就多了一个label格;要是我按照英文说明去做,好像又没有那个代码。这个怎么处理呢?

Skyvee 提到...

Mandy, 你的測試blog裡, 只有一篇文章, 而且此文章沒有設標籤label, 有可能是因此而顯示不出來..

Mandy 提到...

非也非也,我今天又试了一下,不是用测试的Blog,而是我常用的Blog,还是不行。

Skyvee 提到...

Mandy, 我沒遇上你的問題, 所以很難想像是哪邊出問題,不過我裝過別的blog, 運作上是OK的, 除了上述幾位反應的問題.

shiping 提到...

thanks a lot...I like it very much...

炳大 提到...

請問我的標籤雲只有首頁會滾,點入某篇文章後,標籤不會顯示是什麼原因?

Skyvee 提到...

您好,的確發現這功能不太穩定,建議還是先移除,不要裝比較好.

張不點 提到...

不好意思~~
我最近也建立了這個效果
但是我有框框 卻跑不出效果
我有試過兩個標籤
也都沒有效果
可以幫我看一下嘛??
謝謝

Skyvee 提到...

您好,

剛連到您的blog,有看到效果出來囉!標籤不支援中文,所以只會呈現英文標籤. :)

張不點 提到...

但是不穩定~~
而且其實我有設定兩個標籤 @@
你都有看到嘛?? 該不會只有我自己看不到~~
是因為我的文章不夠多嘛??

Skyvee 提到...

這個標籤雲的外掛,好像問題多多,不知道是不是您每個標籤的文章數只有一篇,所以顯示不出來, 如果要測試,可以試看看一個標籤,2篇文章.感覺不太實, 不如您考慮用blogger本身內建的標籤雲? http://www.skyvee.net/2009/08/blogger.html

張不點 提到...

恩恩~~
感謝你撥空幫忙~~~

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.