(Pic from: forums.realmacsoftware.com)這個版本主要是將「文章列表極速版__依標籤排列」加上讚統計的功能。另外，該篇的留言 FreeTong Leung 提供了一些不錯的建議及 CSS 語法，因此本篇也將這些建議放入展示效果，例如：
- 標籤按鈕旁增加新文章的提示效果
- 新文章的提示效果增加顏色閃爍 CSS 語法
至於文章列表極速版的優點、及讚統計的介紹，請參考「文章列表極速版__依日期排列+讚統計」，以下直接敘述如何安裝程式碼。
一、安裝程式碼
新開一篇文章 → 複製以下程式碼：
請先別存檔，以上是主程式的部分，還需要複製 "版面樣式" 的部分，如不需要修改參數，請跳至「二、安裝 CSS」。
如果想自訂參數的話，請參照程式碼行號的說明──
E：可設定最近的幾篇文章要顯示為新文章，紅字 15代表最近的 15 文章，會標示為 "新文章"。
F：藍色字串即為標示 "新文章" 時所顯示的字樣，也可填入 http 開頭的圖片網址。
G：讚統計爆表數量，預設值 50 代表超過這個數字後會顯示 "爆"。
H：爆表時顯示的字串，也可改為自訂字串。
I："讚" 的圖示，可使用自訂的圖示網址。如果使用不同尺寸的圖片，可能需要修改 CSS 以符合版面美觀，請再參考「安裝 CSS」的內容。
J：請填入不想顯示的標籤名稱，每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。如果沒有需要排除的標籤，本行請留下
K：文章開合的效果，預設值 "fadeToggle" 為「淡入淡出」的效果；若改為 "slideToggle" 則有「滑動開合」的效果
L：標籤若不標示有新文章，請改為 "N"。
M：若不展開第一個標籤的文章，請改為 "N"。
二、安裝 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;
}
@-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;}}
.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 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：