Blogger 文章列表極速版﹍(4) 依標籤排列+讚統計

這個版本主要是將「文章列表極速版__依標籤排列」加上讚統計的功能。另外，該篇的留言 FreeTong Leung 提供了一些不錯的建議及 CSS 語法，因此本篇也將這些建議放入展示效果，例如：

1. 標籤按鈕旁增加新文章的提示效果
2. 新文章的提示效果增加顏色閃爍 CSS 語法

至於文章列表極速版的優點、及讚統計的介紹，請參考「文章列表極速版__依日期排列+讚統計」，以下直接敘述如何安裝程式碼。

點此看範例網頁

一、安裝程式碼

新開一篇文章 → 複製以下程式碼：


請先別存檔，以上是主程式的部分，還需要複製 "版面樣式" 的部分。

請參照以下程式碼行號的說明──

E：可設定最近的幾篇文章要顯示為新文章，紅字 15 代表最近的 15 文章，會標示為 "新文章"。

F：藍色字串即為標示 "新文章" 時所顯示的字樣，也可填入 http 開頭的圖片網址。

G：讚統計爆表數量，預設值 50 代表超過這個數字後會顯示 "爆"。

H：爆表時顯示的字串，也可改為自訂字串。

I："讚" 的圖示，可使用自訂的圖示網址。如果使用不同尺寸的圖片，可能需要修改 CSS 以符合版面美觀，請再參考「安裝 CSS」的內容。

J：請填入不想顯示的標籤名稱，每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。如果沒有需要排除的標籤，本行請留下 tocLabelLike.exclude = []; 這樣的內容即可。

K：文章開合的效果，預設值 "fadeToggle" 為「淡入淡出」的效果；若改為 "slideToggle" 則有「滑動開合」的效果

L：標籤若不標示有新文章，請改為 "N"。

M：若不展開第一個標籤的文章，請改為 "N"。

O：由於「Google Drive 關閉外連」功能，綠色字串的 JS 網址是無法外連的，請參照「WFU BLOG 外連 JS 變更及操作說明」，將這個連結下載後存成 JS 檔，上傳到自己的空間或 Dropbox。取得自己的 JS 檔外連後，置換本行的綠色網址字串。

二、安裝 CSS

接在「一、安裝程式碼」這部分的程式碼後面，貼上以下 CSS 程式碼：

<style>
.tocLabelTitle { /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Arial, "標楷體", sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}

.tocLabel { /* 個別標籤區塊 */
margin: 0px 5px 15px;
}

.tocLabelToggle { /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}

.tocPostNo { /* 文章編號 */
float: left;
font-size: 16px;
width: 25px;
text-align: right;
}
.tocPost { /* 文章標題區塊 */
margin-left: 35px;
font-size: 16px;
border-bottom: 1px dotted lavender;
padding-bottom: 5px;
}
.tocPostTitle { /* 文章標題 */
display: inline-block;
width: 75%;
}
.tocLike { /* 讚區塊 */
padding-left: 10px;
display: inline-block;
width: 20%;
vertical-align: top;
}
.tocLike img { /* 讚圖片 */
height: 20px;
vertical-align: middle;
border: none;
box-shadow: none;
}
.tocBurst { /* 爆 */
color: #000060;
font-weight: bold;
vertical-align: middle;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 30px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
.tocLabelNewText { /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
.tocNewText { /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
-webkit-animation: color-change 1s infinite alternate ease-in-out;
-moz-animation: color-change 1s infinite alternate ease-in-out;
-o-animation: color-change 1s infinite alternate ease-in-out;
-ms-animation: color-change 1s infinite alternate ease-in-out;
animation: color-change 1s infinite alternate ease-in-out;
}
@-webkit-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-moz-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-ms-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@-o-keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
@keyframes color-change {0%{color: green;} 50%{color: red;} 100%{color: blue;}}
</style>
請特別注意第四行的紅色字串，如不滿意標籤按鈕的寬度，可自行調整 200 這個數值。

由於每個網站的範本都不同、文章區塊的寬度也不一樣，如果發現 "讚" 或統計數字被擠到下一行(或使用了自訂的 "讚" 圖示)，可能需要改兩個地方：

• /* 文章標題 */ 這個區間，紅色字串的寬度百分比 75% 請自行調整。
• /* 讚區塊 */ 這個區間，紅色字串的寬度百分比 20% 請自行調整。

現在可以將文章發佈，接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能)，提供訪客有很好的導覽效果。

如果有 CSS 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：

點此看範例網頁

三、注意事項

根據這篇「官方說明文件」，標籤的名稱不得使用以下字元：

&<>@!+,

如果使用本篇的工具而執行不正常時，請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。

文章列表極速版各版本：