(Pic from: forums.realmacsoftware.com)市面上所有的 Blogger 文章列表工具，都有共同的兩大天生缺陷，當部落格規模較小時，還不會察覺到；但成長到數百篇、甚至上千篇文章時，就會發現：
1. 文章列表讀取的速度很慢 → 因為一次要讀取的 feed 資料太多
2. 只能列出最新的五百篇文章→ 因為 Blogger feed 一次最多允許讀取 500 項資料
過去寫了幾個「文章列表」的版本，同樣有以上問題。由於一段時間後，自己的部落格也會面臨 500 篇文章的關卡，因此未雨綢繆一下，使用新的技術來改善這兩個重大問題，這也是本篇「極速版」的由來。以下先說明這個版本的各項特點，想直接安裝請跳「二、安裝程式碼」。
一、文章列表「極速版」的特點
既然改了版，順便也稍微調整配置、美化版面一下，並加入 WFU 喜歡的功能設計。特別之處條列如下：
1. 處理資料量大且迅速：如前言所提，無論部落格文章有多少篇都能顯示，且這將會是你看過執行最快速的版本。
2. 年份文章開合按鈕：這個按鈕可收合一整年度的文章，方便迅速檢視較早期的文章，不必用滑鼠捲動頁面。
3. 月份文章開合按鈕：可收合整個月的文章，功用如上一點，適合該月份文章很多的狀況。
4.「載入更多」按鈕：這是 "瀑布流" 的設計，但個人覺得比瀑布流更好，將決定是否要載入資料的權利交還給使用者。避免使用者不想載入資料時，瀑布流卻又一直讀取，佔用系統資源、並讓頁面捲動卡卡。
5.「載入全部」按鈕：第 4 點的一體兩面。
6. CSS 可自訂：所有版面的 CSS、任何參數、效果都能修改，讓自己的文章列表與眾不同。
二、安裝程式碼
新開一篇文章 → 複製以下程式碼：
請先別存檔，以上是主程式的部分，還需要複製 "版面樣式" 的部分，如不需要修改參數，請跳至「三、安裝 CSS」。
如果想自訂參數的話，請參照程式碼行號的說明──
E：一次載入的文章數。基本上預設值 50已經速度很快了，若改成 30、50、70 這樣的數字其實也感覺不太出差異。
F：按鈕文字的設定，例如改成 "Load More"。
G：按鈕文字的設定，例如改成 "Load All"。
H：文章開合的效果，預設值 "fadeToggle" 為「淡入淡出」的效果；若改為 "slideToggle" 則有「滑動開合」的效果
I：月份的字串設定，可改為中文或自訂字串。
三、安裝 CSS
接在「二、安裝程式碼」這部分的程式碼後面，貼上以下 CSS 程式碼：
<style>
.tocYearTitle { /* 年份按鈕 */
display: inline-block;
float: left;
width: 70px;
padding: 5px;
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;
}
.tocYearTitle: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;
}
.tocYearTitle:active {
position: relative;
top: 1px;
}
.tocYear { /* 年份區塊 */
margin: 0px 5px 30px;
}
.tocYearToggle { /* 年份收合區塊 */
margin-left: 100px;
}
.tocMonthTitle { /* 月份按鈕 */
display: inline-block;
font-size: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
color: #000060;
cursor: pointer;
margin: 5px 0px 15px;
text-shadow: 2px 2px 4px #999;
}
.tocMonthTitle:hover {
text-shadow: 0 0 10px #000060;
}
.tocMonthTitle:active {
position: relative;
top: 1px;
}
.tocMonthToggle { /* 月份收合區塊 */
margin-bottom: 20px;
}
.tocDayNo { /* 日期 */
float: left;
font-size: 16px;
line-height: 1.6em;
}
.tocPostTitle { /* 文章標題 */
margin-left: 35px;
font-size: 16px;
line-height: 1.6em;
}
#tocMore { /* 載入按鈕區塊 */
margin: 40px 0px 40px 100px;
}
.tocMore { /* 載入按鈕 */
display: inline-block;
margin-right: 50px;
width: 140px;
padding: 10px;
cursor: pointer;
color: #3a8a9e;
font-family: arial, "標楷體";
font-size: 20px;
font-weight: bold;
text-align: center;
-moz-box-shadow: 0px 10px 14px -7px #899599;
-webkit-box-shadow: 0px 10px 14px -7px #899599;
box-shadow: 0px 10px 14px -7px #899599;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #bab1ba));
background:-moz-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-webkit-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-o-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:-ms-linear-gradient(top, #ededed 5%, #bab1ba 100%);
background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#bab1ba',GradientType=0);
background-color:#ededed;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
text-decoration:none;
text-shadow:0px 1px 0px #e1e2ed;
}
.tocMore:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bab1ba), color-stop(1, #ededed));
background:-moz-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-webkit-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-o-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:-ms-linear-gradient(top, #bab1ba 5%, #ededed 100%);
background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bab1ba', endColorstr='#ededed',GradientType=0);
background-color:#bab1ba;
}
.tocMore:active {
position:relative;
top:1px;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 40px;
font-family: 'Trebuchet MS', Trebuchet, sans-serif;
font-size: 14px;
font-style: italic;
text-shadow: 1px 1px 1px lavender;
}
</style>現在可以將文章存檔，接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能)，提供訪客有很好的導覽效果。
如果有 CSS 基礎概念的話，那麼可以自行修改參數，讓自己的文章列表有截然不同的風貌，可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結，請按下面的按鈕：
四、其他功能版本
未來發佈其他功能的版本時，如 "依標籤" 排列、"讚" 統計的數據，會一併整理在此列表。