2015年3月13日

[CSS] 美化 Blogger 官方標籤雲

A+
最近朋友買了一個漂亮的 Blogger 範本,除了配色一定比官方範本好看之外,也會有一些 jQuery 特效。不過非官方範本想要自己修改版面,就不是那麼容易了,同時也會有一些相容性問題,例如本文的主題 "標籤雲",不巧執行就遇上版面破裂的情形。

Blogger 官方的標籤雲功能其實已經做的不錯,有多種選項可以自訂,就只差在版面沒那麼美觀。如果自己改造一下 CSS,那麼就能做出不錯的效果。以下分享這次調整標籤雲的筆記,想先看效果可點這個網頁:




一、官方標籤小工具


不使用官方標籤小工具的話,網路上有不少標籤雲的外掛。如果不在意網頁多執行額外的 js,那麼可使用炫目的 3D 標籤雲效果,標籤會在一棵類似地球儀的圓球上不斷旋轉。安裝教學可參考這篇「HTML5 標籤雲 - TAGCLOUD

使用官方工具自然是單調了一些,不過至少不影響網頁效能,適合簡潔的版面使用。安裝步驟為:

後台 → 版面配置 → 新增小工具 → 選擇「標籤」工具



如上圖紅框,選擇「標籤雲」即可。其他的各種選項,請依照自己的需求調整。




官方預設的效果不怎麼樣,可以用 "簡陋" 來形容,大概就像上圖這樣。




經過修改後,上圖是不是整齊、美觀、色彩有層次多了呢?



二、修改 CSS 樣式


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:


<style>
/* 標籤雲 start*/
.label-size a {
background: #000; /* 底色 */
padding: 8px; /* 內櫬距離 */
display: inline-block;
margin: 0 2px 6px 0;
color: #fff; /* 文字顏色 */
text-decoration: none;
transition: background 0.5s; /* 動畫效果及時間 */
-webkit-transition: background 0.5s;
-moz-transition: background 0.5s;
}
.label-size a:hover {
background: #aaa; /* 滑鼠經過的顏色 */
}
.label-size span { /* 標籤頁面的 CSS */
display: inline-block;
background: #aaa; /* 底色 */
color: #fff;
padding: 8px;
}
/* 標籤雲 end*/
</style>


CSS 的修改說明請參照綠字即可。很不錯的是,官方預設 CSS 就已經針對使用頻率較低的標籤,讓其顏色變淡。我們用了深色當底色後,變淡的程度就能很明顯看得出來

以上的修改包含了簡單的動畫效果,滑鼠經過按鈕時,顏色的變換會有過場的效果。

其中 /* 標籤頁面的 CSS */ 這一段,代表按下某個標籤、進入該標籤的頁面後,這個標籤會使用不同的 CSS 及顏色來區別。

如果字面說明不瞭解,可前往範例網頁,按下側邊欄標籤雲的其中一個標籤,便可看到效果了:



更多 Blogger 官方工具修改技巧:

6 則留言:

  1. 很有硑究的美花學問, 很精心啊!

    回覆刪除
  2. 回覆
    1. 看到了,您的顏色調得滿好看的,
      而且這樣的應用方式我好像還沒看過,一個頁面使用三個標籤雲,
      效果不錯呢! ^^b

      刪除
  3. 請問版主... 如何在動態檢視的情況下顯示浮動的標籤呢... 手機切換網頁版看的到,但沒切換就看不到

    回覆刪除
    回覆
    1. 動態檢視範本的問題,請參考 http://www.wfublog.com/2016/02/blogger-dynamic-views-mobile-template-feature.html

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。