Blogger 隨機文章 + 自訂尺寸縮圖 (側邊欄工具)

除了「熱門文章」，側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具，就是 "隨機文章" 了。

之前曾製作了「Blogger 隨機文章 + 自適應尺寸縮圖」，由於是橫式版面，只適合擺放在文章結束處。不過將程式碼稍微修改一下，變成直式版面的話，就可以擺在側邊欄了。

以下簡單介紹這個工具的特點，想直接安裝請跳至「二、安裝程式碼」。

點此前往範例網頁

(圖片出處: pixabay.com)

一、隨機文章的特色

請參考上面的效果圖，這個工具的特點如下：

• 以前的 Blogger 隨機文章工具，一次需要讀取全部的 feed 才能隨機抽樣，文章多的時候，除了讀取速度極慢，超過 500 篇則無法抽樣早期文章。
• 本篇的工具並非讀取網站的 feed，而是讀取單篇文章的 feed，所以速度快、不會受到網站文章數的影響。
• 可自訂縮圖長寬尺寸
• 可排除特定標籤字串的文章不顯示 → 例如 "站務" 相關的文章沒有必要出現在隨機推薦文章，可設定排除標籤含 "站務" 字串的所有文章
• 「支援 HTTPS 模式」

二、安裝程式碼

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



以下參數修改請參照以上程式碼行號：

A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，以免重複安裝。

F：顯示的文章數量

G~H：可自訂縮圖的寬度、高度像素(px)值

I：藍色字串請改為自訂的 "無縮圖替代圖片網址"

J：如果不需要排除特定標籤的文章(整個網站的文章都想顯示)，請刪除所有字串，留下 [] 即可。預設的字串以本站來舉例，代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章，都不會出現在隨機文章中。

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

O~BF：如果對 CSS 熟悉可自行修改這部分的參數

以上程式碼儲存後即可看到效果，也可前往前面提到的「範例網頁」看展示效果。

三、常見 FAQ

日後若有常見問題，會持續補充在此。

Q1: 有些文章無法顯示縮圖？

Ans: Blogger 的縮圖功能，需要使用 PICASA 圖床(G+ 相簿)才能自動產生，因此使用其他圖床的話，這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」，在 Blogger 後台上傳圖片，放在文章最前面的位置，就一定能顯示縮圖了。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理