Blogger 自製「精選文章」小工具﹍圖片版

Blogger 官方幾年前推出「精選文章」小工具，我認為這個功能非常有必要性，因為跟側邊欄的「熱門文章」、「最新文章」工具一樣，都具有維持訪客注意力、減少跳出率的用途。

不過本質上，「精選文章」還是有所不同：

• 「熱門文章」顯示的文章無法由自己決定，熱門程度是由訪客決定。
• 「最新文章」容易良莠不齊，不太可能每篇文章都很吸睛。
• 「精選文章」是親自精挑細選過的文章，在某種程度上會比「熱門文章」實用。

但是官方推出的這個「精選文章」工具，WFU 卻從來沒有想要安裝，因為覺得很不實用，只能顯示一篇文章而已。

如果可以顯示自訂數量的精選文章，宣傳效果不是更好嗎？

點此看範例網頁

(圖片出處: pixabay.com)

一、「精選文章」的必要性

雖然本站的主題是 Blogger，不過熱門文章前十名只有一篇與 Blogger 主題相關，這也會造成搜尋長尾關鍵字而來的主要讀者，對網站有興趣而想多閱讀一些熱門、看板文章時，卻找不到幾篇 Blogger 相關文章。

某種程度上這也算是相當無奈的現象，然而熱門文章的排行不是自己能決定的。比較好的作法是，親自挑選幾篇文章放在側邊欄，相信經由這些「精選文章」，可以更快讓讀者認識自己的網站。

那麼本篇將會改造「精選文章」工具：

• 可以指定顯示的文章數
• 可以指定列出某標籤的文章
• 例如將所有要出現在「精選文章」工具的文章，設定某個標籤名稱即可

側邊欄版面效果大致如下：

二、安裝程式碼

請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、及以下程式碼：

1. <div id="collection_img"></div>
2. <div id="collection_img_info"><a href="https://www.wfublog.com/2018/07/blogger-collection-image-version.html">ⓦ Blogger Collection</a></div>
3. <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
4. <script>
5. (function() {
6. var label = "精選文章", // 填入精選文章使用的標籤名稱
7. total = 5, // 顯示最新的幾篇文章
8. noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0J5v0Kk1EMLFsUujsmMW148jucsdV6gFcR3dT4qJHbUyINVq-IDKHXapo2og02tjjL_mr7mPKEFKC1GuEVrT0ch7FnDq4AgO2PLL8-QZqGOZcZ0hyphenhyphenCsQhswF0ZSGOEGeelwfGQWyPo8s7/s1600/wfublog-post.jpg", // 無縮圖的預設圖片
9. width = 400, // 圖片寬度
10. ratio = 0.6, // 縮圖長寬比例
11. feedUrl = "/feeds/posts/summary/-/" + label + "?max-results=" + total + "&alt=json-in-script&callback=?";
12.  
13. $.getJSON(feedUrl,function(a){showPost(a)});function showPost(json){var entries=json.feed.entry,html="",i,j,l,entry,title,link,url,img;var _0xef5b=["\x64\x28\x69\x20\x79\x20\x65\x29\x7B\x32\x3D\x65\x5B\x69\x5D\x3B\x36\x3D\x32\x2E\x36\x2E\x24\x74\x3B\x34\x3D\x32\x2E\x66\x24\x67\x3F\x32\x2E\x66\x24\x67\x2E\x37\x3A\x7A\x3B\x34\x3D\x34\x2E\x6B\x28\x2F\x41\x2D\x63\x2F\x2C\x22\x77\x22\x2B\x6D\x2B\x22\x2D\x68\x22\x2B\x42\x28\x6D\x2A\x43\x29\x2B\x22\x2D\x6E\x22\x29\x2E\x6B\x28\x22\x44\x3A\x22\x2C\x22\x6F\x3A\x22\x29\x3B\x35\x3D\x32\x2E\x35\x3B\x6C\x3D\x32\x2E\x35\x2E\x70\x3B\x64\x28\x6A\x3D\x30\x3B\x6A\x3C\x6C\x3B\x6A\x2B\x2B\x29\x7B\x71\x28\x35\x5B\x6A\x5D\x2E\x45\x3D\x3D\x22\x46\x22\x29\x7B\x37\x3D\x35\x5B\x6A\x5D\x2E\x38\x3B\x47\x7D\x7D\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x48\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x34\x20\x49\x3D\x27\x22\x2B\x34\x2B\x22\x27\x2F\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x61\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x33\x20\x72\x3D\x27\x4A\x27\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x61\x20\x38\x3D\x27\x22\x2B\x37\x2B\x22\x27\x3E\x22\x2B\x36\x2B\x22\x3C\x2F\x61\x3E\x3C\x2F\x33\x3E\x22\x3B\x31\x2B\x3D\x22\x3C\x2F\x33\x3E\x22\x7D\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x28\x31\x29\x3B\x4B\x20\x39\x3D\x22\x3C\x61\x20\x38\x3D\x27\x6F\x3A\x2F\x2F\x4C\x2E\x4D\x2E\x4E\x2F\x4F\x2F\x50\x2F\x51\x2D\x52\x2D\x53\x2D\x54\x2E\x31\x27\x20\x55\x3D\x27\x56\x27\x20\x57\x3D\x27\x58\x2D\x59\x3A\x20\x5A\x3B\x20\x31\x30\x3A\x20\x23\x31\x31\x3B\x20\x75\x2D\x31\x32\x3A\x20\x31\x33\x2C\x20\x31\x34\x2C\x20\x31\x35\x2D\x31\x36\x3B\x20\x75\x2D\x31\x37\x3A\x20\x31\x38\x3B\x27\x20\x36\x3D\x27\x76\x20\u7CBE\u9078\u6587\u7AE0\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x39\x20\x31\x61\x27\x3E\u24E6\x20\x76\x20\x31\x62\x3C\x2F\x61\x3E\x22\x2C\x24\x62\x3D\x24\x28\x22\x23\x78\x22\x29\x3B\x71\x28\x24\x62\x2E\x70\x29\x7B\x24\x62\x2E\x31\x28\x39\x29\x7D\x31\x63\x7B\x24\x28\x22\x23\x73\x22\x29\x2E\x31\x64\x28\x22\x3C\x33\x20\x31\x65\x3D\x27\x78\x27\x3E\x22\x2B\x39\x2B\x22\x3C\x2F\x33\x3E\x22\x29\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x7C\x68\x74\x6D\x6C\x7C\x65\x6E\x74\x72\x79\x7C\x64\x69\x76\x7C\x69\x6D\x67\x7C\x6C\x69\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x75\x72\x6C\x7C\x68\x72\x65\x66\x7C\x69\x6E\x66\x6F\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6E\x66\x6F\x7C\x7C\x66\x6F\x72\x7C\x65\x6E\x74\x72\x69\x65\x73\x7C\x6D\x65\x64\x69\x61\x7C\x74\x68\x75\x6D\x62\x6E\x61\x69\x6C\x7C\x7C\x7C\x7C\x72\x65\x70\x6C\x61\x63\x65\x7C\x7C\x77\x69\x64\x74\x68\x7C\x7C\x68\x74\x74\x70\x73\x7C\x6C\x65\x6E\x67\x74\x68\x7C\x69\x66\x7C\x63\x6C\x61\x73\x73\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x7C\x7C\x66\x6F\x6E\x74\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x5F\x69\x6D\x67\x5F\x69\x6E\x66\x6F\x7C\x69\x6E\x7C\x6E\x6F\x49\x6D\x61\x67\x65\x7C\x73\x37\x32\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x72\x61\x74\x69\x6F\x7C\x68\x74\x74\x70\x7C\x72\x65\x6C\x7C\x61\x6C\x74\x65\x72\x6E\x61\x74\x65\x7C\x62\x72\x65\x61\x6B\x7C\x69\x74\x65\x6D\x7C\x73\x72\x63\x7C\x70\x6F\x73\x74\x5F\x74\x69\x74\x6C\x65\x7C\x76\x61\x72\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x63\x6F\x6D\x7C\x32\x30\x31\x38\x7C\x30\x37\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x63\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x69\x6D\x61\x67\x65\x7C\x76\x65\x72\x73\x69\x6F\x6E\x7C\x74\x61\x72\x67\x65\x74\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x73\x74\x79\x6C\x65\x7C\x74\x65\x78\x74\x7C\x64\x65\x63\x6F\x72\x61\x74\x69\x6F\x6E\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6C\x6F\x72\x7C\x63\x63\x63\x7C\x66\x61\x6D\x69\x6C\x79\x7C\x68\x65\x6C\x76\x65\x74\x69\x63\x61\x7C\x61\x72\x69\x61\x6C\x7C\x73\x61\x6E\x73\x7C\x73\x65\x72\x69\x66\x7C\x73\x69\x7A\x65\x7C\x31\x31\x70\x78\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x43\x6F\x6C\x6C\x65\x63\x74\x69\x6F\x6E\x7C\x65\x6C\x73\x65\x7C\x61\x66\x74\x65\x72\x7C\x69\x64","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xe1cax1,_0xe1cax2,_0xe1cax3,_0xe1cax4,_0xe1cax5,_0xe1cax6){_0xe1cax5=function(_0xe1cax3){return(_0xe1cax3<_0xe1cax2?_0xef5b[4]:_0xe1cax5(parseInt(_0xe1cax3/_0xe1cax2)))+((_0xe1cax3=_0xe1cax3%_0xe1cax2)>35?String[_0xef5b[5]](_0xe1cax3+29):_0xe1cax3.toString(36))};if(!_0xef5b[4][_0xef5b[6]](/^/,String)){while(_0xe1cax3--){_0xe1cax6[_0xe1cax5(_0xe1cax3)]=_0xe1cax4[_0xe1cax3]||_0xe1cax5(_0xe1cax3)}_0xe1cax4=[function(_0xe1cax5){return _0xe1cax6[_0xe1cax5]}];_0xe1cax5=function(){return _0xef5b[7]};_0xe1cax3=1}while(_0xe1cax3--){if(_0xe1cax4[_0xe1cax3]){_0xe1cax1=_0xe1cax1[_0xef5b[6]](new RegExp(_0xef5b[8]+_0xe1cax5(_0xe1cax3)+_0xef5b[8],_0xef5b[9]),_0xe1cax4[_0xe1cax3])}}return _0xe1cax1}(_0xef5b[0],62,77,_0xef5b[3][_0xef5b[2]](_0xef5b[1]),0,{}))};
14. })();
15. </script>
16.  
17. <style>
18. #collection_img .item { margin-bottom: 15px; }
19. #collection_img img { width: 100%; height: auto; object-fit: cover; }
20. #collection_img .post_title a { text-decoration: none; font-size: 16px; }
21. #collection_img_info { margin-top: 5px; text-align: right; }
22. </style>

以下修改請參照以上行號：

• C：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。
• F：紅字請改為要篩選文章的標籤名稱
• G：可修改要顯示的文章數
• H：可修改預設圖片
• I：如果側邊欄寬度沒有大於 400px 的話，可不用改本行數值
• J：修改縮圖的長寬比例
• R~T：如果熟悉 CSS，可自行修改參數

儲存後即可看到效果，也可先看以下 DEMO 頁面的效果：

點此看範例網頁

三、注意事項

以下是幾點補充：

• 可額外設定一個標籤名稱，例如 "精選文章"，專門用來顯示此工具的文章。
• 將所有要顯示在此工具的文章，都新增這個標籤。
• 將來某篇文章不想出現在此工具時，移除這個標籤即可。
• 想調整文章的顯示順序，可修改文章的發佈日期。
• 此工具會從日期較近的文章開始顯示。

更多 Blogger 小工具：