2009-09-01

新標籤工具 (Improved Label Gadgets) - Blogger 標籤雲 (Label Cloud)

標籤一向是 Blogger 中用來分類文章相當好用的功能之一(不要再問我什麼資料夾階層分類的問題了...),但一開始 Blogger 提供的「小工具模組」裡只有標籤清單,標籤一多就要拉一個很長佔空間的 List 來顯示,因為實在不喜歡,所以兩年半前我參考別人做了一個標籤雲 Hack (Label Cloud),主要作用除了顯示所有標籤,而且可以依文章數量加權排列、顯示標籤大小和顏色漸層,不過麻煩的是要改程式碼,加 Javascript 函式、定義 CSS 樣式,而且是用預設的「網頁存檔」小工具來改。現在 Blogger 「終於」推出官方版的 Blogger 工具啦(官方公告在此)!不想用 Hack 的只要去新增這個工具,就有這項功能了~(就算有 Hack,加這個工具也不會有相容性的問題..)

耍懶拖了幾天才來寫這篇介紹文章,安裝步驟很簡單,只要登入後台,到「版面配置」、「網頁元素」的頁面,想加這個工具的地方去「新增小工具」,點選新增「標籤」這個工具:

然後設定屬性:

預設是所有標籤、按字母排列、清單顯示、顯示每個標籤的文章數,如果想改成依數量加權的標籤雲,記得點選到「依頻率排序」、「以雲端顯示」(雲端二字好像不是這樣用的吧),這樣就有很不錯的標籤雲啦!

照例要來看一下原有標籤清單和新標籤雲的差別(拿我測試的 Blog 做的,標籤比較少,這朵「雲」比較小比較難看):

標籤一是傳統中規中矩的標籤列表,而正下方的標籤二就是新標籤雲的樣子,一樣有標籤文章數、照數量排序,標籤字型大小也有加權變化

一定會有人要問:老闆~那和之前你手動 Hack 的標籤雲比較有什麼差別哩?嗯!同樣用 Hack 做出來的標籤雲外觀彈性比較多(能自訂樣式),來比較一下同樣資料源用 Hack 做出來的標籤雲是怎樣:

上面是新的標籤雲,樣式比較沒有變化,而下面是我原有 Hack 做出來的標籤雲,除了字型顏色有變化外,也可以再多加一些有的沒的(像 Mouseover 的 Title Tip)

其實官方的標籤功能啥都有了,而且沒有 Hack 所擁有的限制:可以自選標籤雲的顯示的標籤(自己選)、一個頁面能有多個標籤雲(自己分類)、還有不會和「網頁存檔」模組衝突,看起來比 Hack 做得更棒。不過因為「樣式」是制式的沒選項修改,所以標籤的字體大小和顏色對齊問題沒地方可以調整,但比起以上的彈性,這外觀樣式倒是瑕不掩瑜啦,套句官方說的,這的確是鄉民們 Wish List 裡渴望的工具模組之一,Blogger 也從善如流做給大家用,懶得 Hack 或不會改程式碼的,套用官方工具就挺不錯的啦~

如果覺得字體大小和顏色問題很重要,其實還是有辦法改。我參考這篇文章:Improved Label Gadgets - Now Supporting Label Clouds and More! ,才知道原來新的標籤「頻率加權」總共只有五級(原始碼裡也看得到),而且預設就有 CSS 樣式,分別是 .label-size-1 到 .label-size-5(編號越小代表標籤內的文章越少),所以如果你要標籤雲裡的標籤顏色和字型大小不一樣,那就自己打開原始碼,在 </style> 前面補上這五個標籤的樣式。舉例來說,文章最多(字型最大)的標籤樣式定義可以是:

.label-size-5 a {
  color: #CCCCCC;
  font-size: 18px;
  text-decoration: none;
}

然後 .label-size-4 的顏色就弄深一點、字弄小一點 (ex: 16px),以此類推 -3, -2, -1 的,只要透過修改制式樣式,這樣還是能讓官方標籤雲再多一點點變化。(要最大的彈性還是搞 Hack 啦~)

最後適逢 Blogger 十週年有感,這最老牌的 Blog 平台,到現在都還在一直成長和茁壯,仍然堅持沒有廣告、最大的使用彈性,多次的改版和新增功能,對我這類的 Hacker 也沒有任何阻擋或影響,對使用者還有求必應,真的是佛心來的!雖然有些 Blog 工具和國內 BSP 平台的習慣是有點差異,但論誠意和穩定性,Blogger 還是國內外 Blog 界唯一的王者,之前還要手動做的 Hack,很多也都補齊了(我的 Hack 就無用武之地啦~)。再十年或許網際網路又和現在很不一樣,但如果我還在寫 Blog,Blogger 應該也還是無可取代的平台吧~(Blogger 新功能其實還有很多,詳情關注官方 Blog 比較快~)

回應: 13

riceone 提到...

雖然自己很久沒更新了,但看到新功能還是得跳出讚聲一下啦

或為更流 提到...

blogger的彈性真的大的很高興
而且能改的空間真的好讚

Louie (路易) 提到...

版主最後太妄自菲薄了啦,如果沒有你無私的分享和實驗,我們也沒辦法一直在blogger中玩得這麼爽啊。

我倒是真的越來越喜歡google旗下的每個服務,不僅人性化、簡潔,而且真的是做到貼近使用者。

雖然blogger還有很多空間可以加強,不過真的是眾家部落格當中最有誠意的

Housing 提到...

最後一段寫得很感性啊,
希望還多寫一些hack的啦,
不然就沒樂趣囉...
這就是你的宿命!!

TYC 提到...

請問你可以幫我看一下為什麼我的BLOG下載超慢的嗎?圖片檔太多?或是別的因素?我是使用live writer做文章的上載,有影響嗎?

風信子 提到...

好像最近blogger把一些新功能(用很久的)放上去了,連「繼續閱讀」的功能都「發表」了!

Abin 提到...

To TYC:
首先你的問題和本文標題無關。
Blog 過慢的問題多半是因為外掛模組太多、或是大圖片連結過多所致。你可以參考我這篇文章Pingdom Tools 來檢測你 Blog 過慢的原因。
我的觀察是,你每篇文章裡貼的大圖數量太多,雖然有用 Full Article 的方式來簡化首頁的頁面,但實際上首頁還是會 load 完你所有的大圖(然後再隱藏起來,相信你重新 load 你的首頁也會發現這個狀況,先出現大圖才又收起來)。我不知道你這個「Full Article」是怎麼做出來的,不過既然都要人家點連結看全文,在首頁還全都 Load 看起來是不好的作法。建議你用官方的模組,或是參考我之前文章的作法 (Fullpost),看看類似的狀況有沒有改善。

Ethan 提到...

你是神阿~~~
多謝你的正確資訊
我花了兩天才點進來這,真是沒福氣
....好想哭
就是為了這朵雲的大小
http://taipeicity.blogspot.com

接下來就剩本文下張貼意見欄位,一些既定鏈結的文字大小要找出來了...

Christine 提到...

希望修改Blogger裏的標籤雲跟你在用的一樣, 但是看半天還是不知要在哪裡改? 我在HTML裏找不到. 有一點笨還是很笨? 都沒關係,只要你願意教一下就好了:)

Abin 提到...

To Christine:
本文一開始就已經提到我自己用的標籤雲作法文章的連結,在這裡,該文章裡面提到的「打開樣板文件」,指的是你登入、進入管理介面後,點選「設計」-「修改 HTML」,會在畫面上顯示你自己樣板文件的原始碼,裡面由 HTML、Javascript 和 Blogger 語法的程式碼組成,接下來再進行手動修改。
很多修改都希望最少有一點程式的底子再開始,因為每個人的樣板和需求的不一樣,不可能一套改法就能套所有的 Blog,這並不是「教一下」能搞定的。

Christine 提到...

Abin老師,
謝謝你的所有分享,我是幾個月前樓上那個笨蛋,你怪我問問題也沒留網址, 因我那時沒blog好留啊~ 你要不要來看看我在你的教導下架設的blog? 你該佩服你自己更多...那是你的成績單:))

Christine 提到...

Abin 大大,
我是follow你上衣篇的做法來作標籤, 但發現如果我再加上第二組標籤時, 就不能和第一組一樣可以有自行和顏色的調整, 這label2該怎麼改才能跟你的程式碼相容? 可以麻煩你幫我看看嗎? 感激不禁.

Shirleylove 提到...

不好意思老師,我想問問我曾經試過加入標籤這個icon,但加入了多個名字後,出來的已選取的標籤永遠都是得一個, 我不是太明白可以到那裏更改,請你給我意見吧, 以下是我的blogger, 我真係好唔明白在那裏可以更改那個好戲一場。其實我是不想要這句,而是可以做到你文章提及簡易的那種, 謝謝。

http://shirleylove-shirleylove.blogspot.com/

張貼留言

歡迎留言或發表意見,不過要理性不做人身攻擊。匿名的朋友得到回應的速度會比較慢喔~
發問相關的禮貌和規矩請先參考這篇文章,不當留言、和本文無關的回應可能會被直接刪除無視喔!