最近路那搬家到fc2中文版上去,同時新增了可愛的標籤雲球,讓人非常心動阿~~所以今天都在研究怎麼把它搬到pixnet上。在經歷了耍笨、耍笨還有耍笨的過程,我終於成功的把他搬出來啦 TDT 

 

標籤雲球.JPG

目前測試在blogger、樂多都也都可以用,可是一個比一個麻煩,所以我還是先解說pixnet上如何使用~如果對程式有點概念,懂得觸類旁通的人,應該可以輕易搬到其他地方ˇ

 

WP-Cumulus是很有名的標籤雲球,不過一開始並不支援中文。後來日本的ajaxblogparts改寫出Amazon タグクラウド套件,我再以這個套件為基礎,配合敗家誌的教學,最後寫出來的。不過因為痞客上面沒有標籤的功能,所以我直接以「分類」來製作並撰寫下面的教學,整個過程完全是土法煉鋼…沒耐心的請不要輕易嘗試 (炸)。 另外,我是第一次寫這種教學,所以看不懂的地方請盡量發問QwQ

以下是使用步驟。

1.準備文字和連結

分類.JPG

因為痞客沒有標籤的功能,所以直接以文章分類製作。請先複製文章分類名稱,還有分類的編號。
分類的編號指的是分類網址最後那串數字,以我自己的「推理小說」為例,點下去後跑到這個網址 http://monococcus.pixnet.net/blog/category/822142
最後那串"822142"就是我們所要的數字。

整理完後大概可以得到這樣的表格:

分類文字 分類編號
推理小說
822142
華文推理小說 1325967
blog二三事 1326467

 

2.修改程式碼

程式碼:



<script src="http://coccus.myweb.hinet.net/swfobject.js" type="text/javascript"></script><div id="wpcumuluswidgetcontent"><p style="display:none;">
<p><p>WP-Cumulus @ pixnet by <a href="http://monococcus.pixnet.net/blog/">coccus</a> requires Flash Player 9 or better.</p></p></p></div>
<script type="text/javascript">


/* 標籤與連結設定 */
var keywords = new Array("推理小說", "華文推理小說", "blog二三事", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類文字 */
var keywordlinks = new Array("822142", "1325967", "1326467", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類編號 */
var fontcolor = '0x72d000';/* 字體顏色。預設: 0x72d000*/
var tagcloudassociateid = 'monococcus';/* pixnet的ID*/


/* 標籤與連結設定結束 */


var tagstr = '%3Ctags%3E';
for (var j = 0; j < keywords.length; j++){
var taglink = 'http%3A%2F%2F'+ tagcloudassociateid+'.pixnet.net%2Fblog%2Fcategory%2F' + encodeURIComponent(keywordlinks[j]);
var tagkeyword = keywords[j];
var fontsize = 18;
fontsize = 18 - (j * 0.6);


if(tagkeyword.length > 0)
tagstr += '%3Ca+href%3D%27' + taglink + '%27class%3D%27tag-link-32%27+title%3D%271+%E4%BB%B6%E3%81%AE%E3%83%88%E3%83%94%E3%83%83%E3%82%AF%27+target%3D%22_blank%22+rel%3D%22tag%22+style%3D%27font-size%3A+' + fontsize + 'pt%3B%27%3E' + tagkeyword + '%3C%2Fa%3E%0A';
}
tagstr += '%3C%2Ftags%3E';


var rnumber = Math.floor(Math.random()*9999999);var widget_so = new SWFObject("http://coccus.myweb.hinet.net/tagcloud.swf?r="+rnumber, "tagcloudflash", "190", "200", "9", "#ffffff");widget_so.addParam("wmode", "transparent");widget_so.addParam("allowScriptAccess", "always");widget_so.addVariable("tcolor", fontcolor);widget_so.addVariable("tcolor2", fontcolor);widget_so.addVariable("hicolor", fontcolor);widget_so.addVariable("tspeed", "100");widget_so.addVariable("distr", "true");widget_so.addVariable("mode", "tags");widget_so.addVariable("tagcloud", tagstr);widget_so.write("wpcumuluswidgetcontent");
</script>
<noscript>請確定您有開啟javascript的功能</noscript>

 

請先複製上面的程式碼,或是點選這裡下載,然後將粉紅色的地方一一修改:

a.分類文字和編號對應填上,如下:

var keywords = new Array("推理小說", "華文推理小說", "blog二三事", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類文字 */
var keywordlinks = new Array("822142", "1325967", "1326467", "", "", "", "", "", "", "", "", "", "", "", ""); /* 請在這裡填入分類編號 */

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

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

c.填入痞客id:請填入自己的id,不然會出錯

 

3.在管理後台增加欄位
管理後台 > 側邊欄位設定 > 新增欄位,將剛剛改好的程式碼貼上去。

這樣,就大功告成了!!! 

 

 

WP-Cumulus @ pixnet by coccus requires Flash Player 9 or better.

 

 

 

 

.

 

 

 

看起來不難,不過填入文字和編號的地方很容易出錯,大家請保重(炸)

以上教學,可以轉載、但請保留coccus的名字和coccus的推理空間之連結。

創作者介紹

coccus的推理空間

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


留言列表 (6)

發表留言
  • 恩森
  • hey! 您好 很喜歡你的這種版本標籤雲,請問一下 如果是blogspot的話 可不可以套用呢!....希望可以幫個忙 謝謝您^ ^
  • 恩森
  • 不好意思 想請教您一下
    blogspot的標籤 是中文 就是網址上面是打中文
    "像這樣http://帳號.blogspot.com/search/label/生活"
    所以這個 var keywordlinks = new Array("822142", "1325967",...; /*這數字可以改中文嗎 ? ...很喜歡你這個版本的標籤雲 但是做不出來 不知道可不可以請大大幫忙一下...感謝你
  • 恩森
  • 謝謝你我做出來了 ....你的文章真的很有幫助 ^ ^
  • 不會^^ 能順利解決真是太好了 :D
    為了避免有人看到問題卻沒有看到回復而困擾,我還是囉嗦的說明,blogger的版本請看這篇
    http://monococcus.pixnet.net/blog/post/24516583

    array的部分,數字就改成標籤的內容就好!

    coccus 於 2010/09/28 00:23 回覆

  • 燚燁
  • 經過了一點點挫折之後
    我用你給的程式碼作出天空版本的了 ><
    真的感謝你 ^^~
    話說感覺台灣的部落格在標籤這方面跟國外差好多,其實一篇文章可以有很多個標籤的啊
  • 咦,我真的沒寫到天空版的 @_@
    恭喜你試出來了!

    台灣的部落格真的好討厭,沒人想做標籤的功能嗎 Q_Q?

    coccus 於 2010/10/15 23:37 回覆

  • 脈絡
  • 請問一下,目前痞客邦的文章已能設定標籤了,是否有新的標籤雲工具呢?
  • 不好意思,這要等我有空才能來研究。只是最近加班加到快死掉,連部落格的更新都很難維持 ... ><

    coccus 於 2011/10/11 00:34 回覆

  • 悄悄話