2015年3月20日

[教學] 修改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

0 意見:

張貼留言