WP-Cumulus是很有名的標籤雲球,不過一開始並不支援中文。後來日本的ajaxblogparts改寫出Amazon タグクラウド套件,我再以這個套件為基礎,配合敗家誌的flash教學,最後加上寵物先生處理掉encodeURI的問題,終於完成這份教學>D<//

要怎麼使用立體、3D的flash標籤雲球呢?以下整理了四種blog:blogger、fc2、pixnet痞客邦和roodo樂多的標籤雲球製作方法。

 

首先,先整理一下這四個部落格的分類法:

 

  標籤tag 分類category
blogger
 
fc2

pixnet痞客邦  
roodo樂多

 

以難易度來看,最簡單的是blogger的標籤、再來是fc2的標籤;剩下fc2的分類、痞客和樂多的狀況都差不多 -x- 以下請配合這裡閱讀。

概論

因為這是土法煉鋼,所以第一步有事先準備、再來改程式碼。
1.準備要顯示的標籤文字和連結
2.修改程式碼
3.放到blog中、完成 

以下是各blog的製作方法:

 


pixnet 標籤雲球的製作方法

請參照這篇

 


blogger 標籤雲球的製作方法

範例:http://coccus.blogspot.com/

1.blogger的標籤是最簡單的,他的連結網址就是標籤。所以第一步不用特別準備,只要決定好你要用哪些既有標籤就好。

2.程式碼請按這裡下載

修改 :

2.a.填入標籤文字,如下:

var keywords = new Array("推理小說", "華文推理小說", "blog二三事", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入標籤文字 */

沒有填滿沒關係、只要注意 " 和 , 不要消失、文字和編號有一一對應就好。如果你的標籤非常多,可以繼續擴充~但是版面會很花 XD

2.b.修改顏色:預設是綠色

2.c.填入blogger URL:請填入自己的blogger url開頭。例如 coccus.blogspot.com 就是填入 "coccus" ~

3.新增小工具 > Html/ Javascript > 將修改過的程式碼貼上、完成!

 


fc2 的標籤雲球作法

範例:http://lunajill.blog124.fc2.com/

1.fc2有標籤和文章分類,如果打算用標籤,那就不用特別準備;如果要用分類,請先收集分類名稱和分類編號。分類編號指的是分類網址中的數字,例如http://coccus.blog43.fc2.com/blog-category-4.html  這中的4就是我們要的數字

另外還有個問題是,如果你用的fc2是日文版而非中文版,有些字會變成#124355 之類的表示法,這樣...無解 =D=  請乖乖用分類吧ˇ

2.程式碼下載:純標籤純分類

2.a.

純標籤修改:同blogger,直接在 keywords中填入標籤文字

純分類修改:分別在keywords和keywordlinks中填入分類文字和編號
var keywords = new Array("推理小說", "華文推理小說", "blog二三事", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類文字 */
var keywordlinks = new Array("4", "16", "7", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類編號 */

有沒有混合用的?有,可是很麻煩…有人問再寫吧OTZ 

2.b.修改顏色:預設是綠色

2.c.填入fc2 URL:請填入fc2帳號和blog編號,例如 coccus.blog43

3.邊欄設定(プラグインの設定) > PC用、公式プラグイン追加 > 將修改過的程式碼貼上、完成!

 


樂多的標籤雲球製作法

範例:http://blog.roodo.com/coccus/

1.樂多也是兩種都有,可是兩種一樣麻煩 ... 因為他標籤前面有串亂數,完全沒有易用性 (炸)  所以,不管要用標籤或者是分類,都要收集網址。

如果使用標籤,要的是這段:http://blog.roodo.com/coccus/tag/154737/非心得
如果使用分類,要的是這段:http://blog.roodo.com/coccus/archives/cat_78875.html

2.程式碼下載:這裡

2.a.將文字和連結分別甜入 keywords 和 keywordlinks 中

var keywords = new Array("非心得(標籤)", "非心得(分類)", "", "", "", ""); /* 請在這裡填入文字 */
var keywordlinks = new Array("tag/154737/非心得", "archives/cat_78875.html", "", "", "", ""); /* 請在這裡填入連結 */

2.b.修改顏色:預設是綠色

2.c.填入樂多網址:請填入自己的樂多網址,例如 coccus

3.插入欄位 > 新增,完成!

創作者介紹

coccus的推理空間

coccus 發表在 痞客邦 PIXNET 留言(29) 人氣()


留言列表 (29)

發表留言
  • 心戒
  • 可可~~~~~
    我只是隨便說說(任性)結果你和首獎先生就這樣搞出來了啊啊啊!

    我愛妳(趁亂表白)!啾~~~~
  • 嘿嘿嘿 =////=

    你是好人~(遞卡)(←這是徹哥教的?)

    coccus 於 2009/11/04 21:03 回覆

  • 路那
  • 心戒你這樣哪裡是趁亂表白~是趁四下無人的時候告白我有看到!
    竟然還偷親好女孩兒可可,我要去告訴遙媽說你在進行不純潔的異性交往(爆)
  • Alex
  • Hi

    請問一下,"2.c.填入blogger URL:請填入自己的blogger url開頭"。這部份是要填哪邊呢?我找不到,請指點迷津。
  • 您好,

    我舉例說明比較清楚:
    我的blogger完整網址是:http://coccus.blogspot.com/
    開頭指的就是 "coccus" 這個。
    又例如逆轉讀書會(請看旁邊的小貼紙)完整網址是:http://reading-online.blogspot.com/
    那開頭就是 "reading-online"
    因為這部分和使用者帳號不一定一樣,所以才會說是開頭。

    所以您應該填入的是 "alexmaclife" ~

    coccus 於 2010/03/27 22:52 回覆

  • 阿榮哥
  • help

    你好
    我用了你的3D標籤雲
    安裝方法很簡單但是目前有一個小問題
    就是當我按下去實他會用新網頁開啟
    我想在同一個網頁開起可以請教一下要如何修改嗎
  • 您好,
    因為我預設是在新視窗開啟,如果要在同一個網頁開請,請在標籤語法中搜尋"blank",取代成"self"
    這樣就會在原本的網頁中開啟

    coccus 於 2010/04/24 23:18 回覆

  • lam
  • 您好.是否可以請教您..blogger 標籤雲球的製作方法-.程式碼進入HINET頁面.一直無法下載..是否有其他載點呢??謝謝您的教學
  • 您好,

    請問直接按右鍵→另存新檔也沒辦法嗎?
    不然請直接搜尋"blogger_tagcloud.txt",也可以直接找到那個txt file
    如果真的再不行的話,我再mail到你的信箱中吧
    因為我想不到其他永久的下載空間可以使用 ~"~

    coccus 於 2010/05/31 23:11 回覆

  • lam
  • 謝謝您的指引.我按照您的方式.搜尋到了此txt.是不是可以再請教您.
    使用此語法.是否需要另行使用cs3製作出swf檔案呢?
    在/* 標籤與連結設定 */
    var keywords = new Array("", "", "", "", "", "", "", "", "", "", "", "");/* 請在這裡填入標籤,例如 "生活", "音樂" 。欄位數量可以自由擴充縮減 */
    在這邊是設定完畢後刪除-請在這裡填入標籤,例如 "生活", "音樂" 。欄位數量可以自由擴充縮減 */這段說明文字嗎? 最後的語法<noscript>請確定您有開啟javascript的功能</noscript>
    這邊要怎麼修改呢..還望您不吝指教.打擾您了
  • 不好意思,最近比較忙所以不能及時回覆。

    關於您的問題
    1. 不需要另外製作swf檔案,因為我已經把swf檔案掛在我自己的hinet空間中了 (如果哪天我的hinet空間掛了,大家的標籤雲也會一起掛掉就是...)
    2. 那段說明文字可以刪除、也可以不用刪除。如果要擴增或縮減欄位,是增加或刪除引號(""),引號後面一定要配上一個半行的逗號(,),但最後一個引號不用。只要把握這個原則就可以一直增減欄位
    3. noscript我不太確定您想做怎樣的修改?中間的文字是當網頁瀏覽者把javascript關掉時才會出現的字樣,如果要修改字樣可以任意修改,整段拿掉其實也無所謂

    希望這樣有清楚回答問題

    coccus 於 2010/06/02 23:48 回覆

  • lam
  • 謝謝您的指導以及大方的分享...
    我試想要學會中間的過程
    看了您的文章很有助益
    再一次感謝您指導了
  • 不會^^
    不過最難的地方我也只是引用了別人現成的程式
    只做了最基礎的修改~"~

    coccus 於 2010/06/24 00:22 回覆

  • BiApp
  • 您好我想請問顏色要怎麼修改呢???我找16進位的貼上結果變黑色的
    點標籤卻說找不到標有XXX標籤的文章

    還有球的大小可改變嗎???謝謝您
  • 色碼請保留最前面的 0x 不要取代掉
    像是 0xffffff
    (請看 http://monococcus.pixnet.net/blog/post/24515121 色碼中桃紅色的地方)

    球的大小請找一下程式碼中這段 "tagcloudflash", "190", "200", "9" 把190和200 改成你要的數字就行了

    coccus 於 2010/08/04 19:59 回覆

  • BiApp
  • 您好!!因為我的是blogger...點標籤卻說找不到標有XXX標籤的文章!!
    請問要怎麼修改呢???
  • 一定要先在blogger內設定好標籤才可以用喔。請參考我blogger的範例,標籤雲球裡的標籤,都是已經先在blogger中設定好才放進去的。請確定標籤的字和程式碼中的標籤的字"完全"相同。

    coccus 於 2010/08/05 14:18 回覆

  • BIAPP
  • 下午之前成功了....但為什麼我剛剛看....標籤雲不見了???
    出現WP-Cumulus @ blogger by coccus requires Flash Player 9 or better.
    這些文字.....
  • 可能是自己電腦上的flash player 或瀏覽器出了問題 @@ 先換台電腦或換個瀏覽器看看?

    coccus 於 2010/08/09 01:29 回覆

  • 小雲
  • 我的是Blogger, 你說 <2.程式碼請按這裡下載> 為什麼我按下載後什麼都沒有?
  • 我設定的是在新視窗開啟連結,可能被您的瀏覽器封鎖了,請確認一下有沒有彈出視窗被封鎖。或者是直接按右鍵、選擇另存。

    coccus 於 2010/10/04 17:54 回覆

  • 小雲
  • 3D cloud tags

    還是看不到ㄟ.
    我留了email了, 可不可以拜託你用email寄給我? 感恩.
  • 我已經寄出了喔 :)

    coccus 於 2010/10/05 22:06 回覆

  •  小雲
  • 我做好了, 而且真的可以用!! 謝謝偉大的coccus老師!!
  • 不會^^"

    coccus 於 2010/10/06 22:35 回覆

  • boleyn
  • 你好,我是一個blogger。現在在學習它。我現在想用你的方法,不過,我想自己保存你的模板中的js和swf文件。不知道你能否Email給我?
    還有我想問一下,關於你的方法中的“var rnumber = Math.floor(Math.random()*9999999);var widget_so = new SWFObject("http://coccus.myweb.hinet.net/tagcloud.swf?r="+rnumber, "tagcloudflash", "270", "200", "9", "#ffffff");”中,如果我又自己的swf地址,我就可以直接代替你的模板中的嗎?那swf文件地址中的“...tagcloud.swf?r=”最後的?r=是什麽意思?
    我的Email:hebzhb#gmail.com,期待您的回覆。
  • 您好,
    1. 關於 js 和 swf 請直接到標籤雲程式的原始出處 WP-Cumulus 下載
    http://wordpress.org/extend/plugins/wp-cumulus/

    2. 如果你重新上傳swf文件的話,當然可以取代。同樣的,js文件也是

    3. ?r= 是用來傳遞參數,但是為什麼設計為r要去重新看WP-Cumulus的程式碼。現在電腦中沒有適合的工具輔助,就懶得去trace了 :p

    coccus 於 2010/12/14 00:34 回覆

  • boleyn
  • 你好,當我替換掉你的swf文件地址后,就不能顯示了,顯示是空白。不知道爲什麽。如果我不替換你的swf文件,因為我在大陸,不翻牆也是看不到。所以我現在很糾結。你能指點指點我嗎?
    另外,你的空間,我要是不翻牆的話也看不到...鬱悶!
  • 不好意思,請問可以給我你的blog位置嗎?不然我無法判斷原因呢。說不定是你上傳的空間不支援外連之類的?
    至於翻牆的問題,這就不是我能解決的了 ...

    coccus 於 2010/12/15 16:30 回覆

  • boleyn
  • 爲什麽我上午的留言沒有顯示?
    我現在的問題是這樣的:
    1、我用你的方法修改的,必須要翻牆才能看到(我是在大陸),不翻牆的話,只是顯示空白。
    2、我如果將你的swf文件地址換成我保存在google code上的地址的話,即使我翻牆也無法看到了,顯示是空白。
    所以,我想是不是你的swf文件裏面有什麽連接之類的給墻了?
    期待你的回覆。
    謝謝!
  • 你的留言很容易被系統自動判別為廣告留言,我需要手動解除 @@

    1. 我現在放置swf 和 js 檔的空間是台灣的hinet網頁,推測被擋了
    2. 我跟google code 不熟,不過我猜是因為他不支援把檔案連結到其他網站上?我現在對網路空間空間不熟,查了一下支援swf外連的空間如下:
    http://www.exoload.com/
    http://localhostr.com/
    http://www.dropbox.com/
    但現在有哪些空間可用、那些空間沒有被擋,就需要您自己試看看了

    coccus 於 2010/12/15 16:47 回覆

  • boleyn
  • 我現在也不知道是怎麼回事了。
    我想再問一下,你的swf文件是不是在http://wordpress.org/extend/plugins/wp-cumulus/上面直接下載的?沒有做任何改動嗎?要是改動過的話,能Email我一份嗎?非常感謝!
    非常謝謝你這幾次的回覆。
  • 我的swf檔案和js檔案都是從 wp-cumulus 專案中抓出來的,沒有任何變動(swf檔案要變動的話,一定要有fla檔、但是原始專案中沒有提供這個檔案,也就不可能變動了)

    coccus 於 2010/12/16 01:07 回覆

  • boleyn
  • 嗯,那我再看看。非常感謝你的回覆。Thanks!
  • 不會~ 感覺上沒幫上什麼忙 >_<

    coccus 於 2010/12/16 21:22 回覆

  • boleyn
  • 還是謝謝,能耐心的回覆我的問題(我在計算機方面動的太少了)已經很高興了,呵呵
  • Bonnie little
  • 痞客現在有tag了。
  • 是阿~過了這麼久終於有了 TDT!!!
    不過還要找時間研究一下 OTZ

    coccus 於 2011/07/10 23:41 回覆

  • Julia
  • 你好,
    我想求救~
    我用的是 fc2,
    我照著上面說的方式改了(純標籤),
    可是怎麼樣都無法顯示。
    我的 flash player 是最新版本,
    不知道是在哪邊出了問題。
    可以麻煩幫我看一下嗎?
    我留了 email。
  • 不好意思,方便給我你的網誌連結嗎?這樣我比較容易找問題 ><

    coccus 於 2011/08/12 01:40 回覆

  • Julia
  • 喔好好~
    謝謝你喔~

    我把標籤雲 (tag cloud) 放在右邊最下面的欄位。
  • 不好意思,現在才回覆。
    我到你的blog看過了,發現欄位中**什麼都沒有**
    要麻煩你確認你是從"プラグインの設定"中選擇"PC用、公式プラグイン追加"的邊攔,並且將修改過的語法從
    <!-- SWFObject
    一直貼到
    noscript>
    這段喔~

    coccus 於 2011/08/14 17:04 回覆

  • Julia
  • 我又來了~

    不知道是不是我們說的管理頁面語言不同,
    我用的是中文版喔~
    我找不到你上面說的那個。

    不過我有發現我網誌的外掛程式好像不支援這種...
    改貼到文章裡面就可以顯示的說 (用其他的程式碼測試)。
    不懂為什麼會這樣。
  • 因為找不到fc2中文版的教學,所以花了點時間確認
    剛剛確定過,可以使用在邊欄沒問題喔~

    設定外掛程式>添加FC2外掛程式>自由區域>添加
    在"修改自由區域的内容"貼上
    <!-- SWFObject

    noscript>
    這樣就可以了!

    coccus 於 2011/08/21 01:45 回覆

  • Julia
  • 瞭解~
    我會再試試。
    謝謝你。 :)
  • 訪客
  • coccus您好
    謝謝您的發文,讓我這個半調子生手,一試做,就成功
    我已經在我的部落格裡連結您的發文,如下
    讓更多人也會3d標籤
    謝謝


    http://dafishworld.blogspot.com/2011/09/3d.html


  • 您好,

    感謝您的連結與告知 :D

    coccus 於 2011/09/17 00:28 回覆

  • 藍藍
  • 你好~~
    我想請問部落格之外的一般網站可以使用嗎?
    我又該使用哪種方法呢~~
  • 可以,不過可能要請你自己寫程式碼
    詳細的使用方式 ... 我最近應該不會有時間研究 ~"~
    不過網站使用起來應該沒有動態增加的問題,所以可以把很多東西寫死

    coccus 於 2012/03/07 02:06 回覆

  • ai7kill
  • 您好: )
    從栞的心靈角落連到這邊, 並發現標籤雲球這個好外掛件
    本身也有在blogger書寫, 點進你備份文章的blogger, 發現側欄放著我夢寐以求的樹狀標籤,
    想請問能否告訴我那是怎麼弄的呢?
    (網路上有各式樹狀書籤的css分享, 但我心儀的是你所使用的簡潔款式)

    謝謝: )
  • 悄悄話
  • 律律
  • 您好
    我是使用FC2
    關鍵字也有打正確,在部落格文字雲是會出現
    可是點了關鍵字是連接到FC2主頁
    請問是我的這個
    var tagcloudassociateid = '';/* -----------,例如 lunajill.blog124 */
    +BLOG的地方出問題嗎?
    請問該怎麼找到BLOG後的數字
    謝謝您