最近路那搬家到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的推理空間之連結。

arrow
arrow
    全站熱搜

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