除了「熱門文章」,側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具,就是 "隨機文章" 了。
之前曾製作了「Blogger 隨機文章 + 自適應尺寸縮圖」,由於是橫式版面,只適合擺放在文章結束處。不過將程式碼稍微修改一下,變成直式版面的話,就可以擺在側邊欄了。
以下簡單介紹這個工具的特點,想直接安裝請跳至「二、安裝程式碼」。
(圖片出處: pixabay.com)
請參考上面的效果圖,這個工具的特點如下:
請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:
以下參數修改請參照以上程式碼行號:
A:可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,以免重複安裝。
F:顯示的文章數量
G~H:可自訂縮圖的寬度、高度像素(px)值
I:藍色字串請改為自訂的 "無縮圖替代圖片網址"
J:如果不需要排除特定標籤的文章(整個網站的文章都想顯示),請刪除所有字串,留下 []即可。預設的字串以本站來舉例,代表所有樹狀標籤中包含 "站務" 字串的標籤文章、以及所有包含 "休閒" 字串的標籤文章,都不會出現在隨機文章中。
M:由於過去發生「Google Drive(js檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流,並用「Google Drive 外連產生器 V2」取得外連網址。
O~BF:如果對 CSS 熟悉可自行修改這部分的參數
以上程式碼儲存後即可看到效果,也可前往前面提到的「範例網頁」看展示效果。
日後若有常見問題,會持續補充在此。
Q1: 有些文章無法顯示縮圖?
Ans: Blogger 的縮圖功能,需要使用 PICASA 圖床(G+ 相簿)才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,在 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檔)流量限速」的情形,為了避免將來某天這個小工具無預警罷工,建議讀者有空的時候,參考以上文章連結,自行將綠色字串的 js 檔分流,並用「Google Drive 外連產生器 V2」取得外連網址。
O~BF:如果對 CSS 熟悉可自行修改這部分的參數
以上程式碼儲存後即可看到效果,也可前往前面提到的「範例網頁」看展示效果。
三、常見 FAQ
日後若有常見問題,會持續補充在此。
Q1: 有些文章無法顯示縮圖?
Ans: Blogger 的縮圖功能,需要使用 PICASA 圖床(G+ 相簿)才能自動產生,因此使用其他圖床的話,這個小工具很可能無法正常顯示縮圖。建議參考「選擇喜歡的圖片當作 Blogger 文章縮圖」,在 Blogger 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。
更多實用工具: