[教學] 修改google blogger標籤雲的css樣式

最近在逛網頁的時候，發現網站旁邊的標籤雲好像可以修改，於是在網站上搜尋了一下，逛到了一個網站很不錯，提供了許多blogger修改的方式，網站是WFU BLOG，有興趣的大家可以參考看看，以下將介紹可以如何進行標籤雲CSS樣式的修改。

在原文中是透過「編輯HTML」修改blogger的範本中的程式碼，在這裡我們提供另一個也是相當簡易，而且不用擔心會修改到太多原始碼的辦法。

首先，一樣是到範本的地方，這裡是要點選「自訂」而不是「編輯HTML」

點選最左邊的「進階」，把選單拉到最下方後會有一個「新增CSS」，把下述的程式碼貼入後按儲存就可以了！

第一段是說明修改標籤雲文字的格式，{}內放的就是CSS語法，有興趣的可以自行修改

.label-size a {
font-family:微軟正黑體;
font-weight: bold;
text-decoration: none;
transition: background 0.5s; /* 動畫效果及時間 */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
}

第二段是說明當滑鼠移過這些標籤時，會有什麼樣的效果

.label-size a:hover {
background: #0b5394; /* 滑鼠經過的顏色 */
color: white;
}

最後一段則是修改標籤頁面，

.label-size span {
display: inline-block;
background: #0b5394; /* 底色 */
color: #fff;
padding: 8px;
}

把這三段都貼到新增自訂的CSS後按儲存，就可以修改標籤雲嘍！

我們也可以順便認識一下裡面的程式碼，要修改標籤雲的樣式，我們必須先認識標籤雲的名稱為「.label-size」，所以第一行的「.label-size a{}」就是要去修改標籤雲的樣式，{}裡面放的就是css語法；第二個部分是「.label-size a:hover{}」，hover指的就是當滑鼠滑過，意思就是當滑鼠滑過要呈現什麼樣的效果；第三部份則是「.label-size span {}」，這裡面就是去修改標籤頁面的css語法。

參考資料：WFU BLOG