其實這個工具很久以前就很想做了，原因是側邊欄放了「熱門文章」小工具，但本站性質比較奇特一點：- 網站主題以 Blogger、部落格經營設計為主
- 而網站流量主要從 Google 搜尋引擎而來
- 可是流量較大的文章多半與網站主題無關
- 導致這個熱門文章排行榜，對主力客群吸引力不大
- 主要的讀者在熱門文章不容易看到與網站主題相近的文章，會喪失停留的機會
所以老早想做個「精選文章」這樣的小工具來取代熱門文章。與其顯示一個無法控制與預期的榜單，不如只顯示精心挑選、忠實讀者真正有興趣與需要的文章。
(圖片出處: pixabay.com)
一、功能介紹
1. 文字版
本篇提供的側邊欄工具，特點如下：
- 只顯示文字標題 (無圖片)
- 可自訂顯示順序、每頁顯示的文章數
- 超過一頁可顯示的數量時，可進行上下頁切換
- 所以要擺放幾篇精選文章都可以
2. 圖片版
先前曾製作另一個版本「Blogger 精選文章圖片版」，差異如下：
- 可顯示文章縮圖
- 可自訂顯示的文章數，但不能切換上下頁
- 要更換文章顯示順序的話沒那麼方便，比較麻煩一些
3. 其他方案
如果要顯示的精選文章沒那麼多，不需要切換上下頁的話，那麼也不一定要安裝本篇的工具，直接使用官方小工具「連結清單」即可。
二、功能展示
1. DEMO 效果
請見下方這個小工具的效果，可直接操作試玩：
2. 側邊欄效果
或是也可看本站右邊側邊欄，目前有三個區塊使用本篇的工具：
- 精選文章
- Blogger 精選
- 網頁設計精選
三、安裝程式碼
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
1. 準備動作
請到後台「主題」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<style>
/*Blogger 精選文章*/
#collection_outer ul,#collection_outer li{list-style:none;margin:0;padding:0;}
#collection_outer li{padding-bottom:10px;font-size: 14px;line-height:1.4;}
#collection_outer a,#collection_info a{text-decoration:none;}
#collection_info{float:right;font-size:11px;font-family:helvetica, arial, sans-serif;text-shadow:1px 1px 1px #E6E6FA;}
#collection_info a{color:#ccc;}
.clp_postTitle{font-weight:700;}
#clp_switchPage{background-color:#eee;font-size:14px;line-height:16px;margin:5px 0;padding:3px;}
#clp_switchPage a,#clp_switchPage span{box-sizing:border-box;display:inline-block;border-left:1px dashed #aaa;text-align:center;padding:0;}
#clp_switchPage a:hover{background-color:rgba(100,100,100,0.1);}
#clp_switchPage a:first-child,#clp_switchPage span:first-child{border-left:0;}
</style>第 1 行綠字可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
其餘的部分，如果對 CSS 熟悉可自行修改參數，沒問題即可儲存範本。
2. 安裝小工具
請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及以下程式碼：
<div id="collection_outer"></div>
<div id="collection_info"><a href="https://www.wfublog.com/2018/12/blogger-collection-text-version.html">ⓦ Collection Posts</a>
</div>
<script>
var clp = {
showPost: 8, // 每頁顯示幾篇文章
nextLogo: "▸", // 下一頁圖示
prevLogo: "◂" // 上一頁圖示
};
clp.posts = [
["CC0 免費圖庫搜尋引擎", "https://www.wfublog.com/2017/05/cc0-free-high-quality-image-search-engine-manual.html"],
["標題 2", "網址 2"],
["標題 3", "網址 3"],
["標題 4", "網址 4"],
["標題 5", "網址 5"]
];
clp.switchPage=function(a){var e=clp.showPost,c="",d="50%";if(a>0){c+="<a class='clp_prevPage' style='width:"+d+"' href='javascript:' title='上一頁'>"+clp.prevLogo+"</a>"}else{c+="<span class='clp_prevPage' style='width:"+d+"'>"+clp.prevLogo+"</span>"}if(a+e<clp.posts.length){c+="<a class='clp_nextPage' style='width:"+d+"' href='javascript:' title='下一頁'>"+clp.nextLogo+"</a>"}else{c+="<span class='clp_nextPage' style='width:"+d+"'>"+clp.nextLogo+"</a>"}$("#clp_switchPage").html(c);$("a.clp_prevPage").click(function(){b();setTimeout(function(){clp.main(a-e)},500)});$("a.clp_nextPage").click(function(){b();setTimeout(function(){clp.main(a+e)},500)});function b(){$("#collection_outer").html("<div style='text-align: center; margin: 20px auto;'><img src='//lh5.googleusercontent.com/-EyVZ0f8J0qQ/UCeEG7aa8nI/AAAAAAAADtY/9sXw53XkYXM/s512/indicator-light.gif'/></div>")}};clp.main=function(idx){var showPost=clp.showPost,posts=clp.posts,html="",i,title,link,info;idx=idx||0;html+="<ul>";for(i=idx;i<idx+showPost;i++){if(i>posts.length-1){break}title=posts[i][0];link=posts[i][1];html+="<li>";html+="<div class='clp_postTitle'><a href='"+link+"'>"+title+"</a></div>";html+="</li>"}html+="</ul>";html+="<div id='clp_switchPage'></div>";var _0xacf3=["\x24\x28\x22\x23\x33\x22\x29\x2E\x31\x28\x31\x29\x3B\x35\x2E\x36\x28\x37\x29\x3B\x32\x3D\x22\x3C\x61\x20\x38\x3D\x27\x39\x3A\x2F\x2F\x62\x2E\x63\x2E\x64\x2F\x65\x2F\x66\x2F\x67\x2D\x68\x2D\x69\x2D\x6A\x2E\x31\x27\x20\x6B\x3D\x27\x6C\x20\x27\x20\x6D\x3D\x27\x6F\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x70\x20\x71\x27\x3E\u24E6\x20\x72\x20\x73\x3C\x2F\x61\x3E\x22\x3B\x74\x20\x24\x30\x3D\x24\x28\x22\x23\x30\x22\x29\x3B\x75\x28\x24\x30\x2E\x76\x29\x7B\x24\x30\x2E\x31\x28\x32\x29\x7D\x77\x7B\x24\x28\x22\x23\x33\x22\x29\x2E\x78\x28\x22\x3C\x34\x20\x79\x3D\x27\x30\x27\x3E\x22\x2B\x32\x2B\x22\x3C\x2F\x34\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6E\x66\x6F\x7C\x68\x74\x6D\x6C\x7C\x69\x6E\x66\x6F\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x6F\x75\x74\x65\x72\x7C\x64\x69\x76\x7C\x63\x6C\x70\x7C\x73\x77\x69\x74\x63\x68\x50\x61\x67\x65\x7C\x69\x64\x78\x7C\x68\x72\x65\x66\x7C\x68\x74\x74\x70\x73\x7C\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x38\x7C\x31\x32\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x74\x65\x78\x74\x7C\x76\x65\x72\x73\x69\x6F\x6E\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x50\x6F\x73\x74\x73\x7C\x76\x61\x72\x7C\x69\x66\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xa4ccx1,_0xa4ccx2,_0xa4ccx3,_0xa4ccx4,_0xa4ccx5,_0xa4ccx6){_0xa4ccx5=function(_0xa4ccx3){return _0xa4ccx3.toString(_0xa4ccx2)};if(!_0xacf3[5][_0xacf3[4]](/^/,String)){while(_0xa4ccx3--){_0xa4ccx6[_0xa4ccx5(_0xa4ccx3)]=_0xa4ccx4[_0xa4ccx3]||_0xa4ccx5(_0xa4ccx3)}_0xa4ccx4=[function(_0xa4ccx5){return _0xa4ccx6[_0xa4ccx5]}];_0xa4ccx5=function(){return _0xacf3[6]};_0xa4ccx3=1}while(_0xa4ccx3--){if(_0xa4ccx4[_0xa4ccx3]){_0xa4ccx1=_0xa4ccx1[_0xacf3[4]](new RegExp(_0xacf3[7]+_0xa4ccx5(_0xa4ccx3)+_0xacf3[7],_0xacf3[8]),_0xa4ccx4[_0xa4ccx3])}}return _0xa4ccx1}(_0xacf3[0],35,35,_0xacf3[3][_0xacf3[2]](_0xacf3[1]),0,{}))};clp.main();
</script>修改說明如下：
- 紅色數字可改為自訂數量
- 接下來比較複雜一些：
- clp.posts 儲存了所有文章資訊，外層用一組括號 "[ ]" 包覆起來
- 內層每一組括號 "[ ]" 存放一組文章資訊
- 其中藍色字串請改為自己的文章標題，綠色字串請改為自己的文章網址
- 要減少文章請刪除一組內層括號 "[ ]" 及後面的逗點 ","
- 要增加文章請複製一組內層括號 "[ ]" 及後面的逗點 ","
- 請注意最後一組內層括號 "[ ]" 的後面，不可以有逗點
儲存後即可看到效果，修改若有問題請仔細詳閱以上說明。
更多 Blogger 側邊欄工具：