2015年12月31日

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

A+
random-number-Blogger 隨機文章 + 自訂尺寸縮圖  側邊欄工具除了「熱門文章」,側邊欄另一個可吸引訪客停留、讓網站舊文章曝光的常用工具,就是 "隨機文章" 了。

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

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



(圖片出處: pixabay.com)


一、隨機文章的特色


blogger-random-posts-Blogger 隨機文章 + 自訂尺寸縮圖  側邊欄工具

請參考上面的效果圖,這個工具的特點如下:
  • 以前的 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 後台上傳圖片,放在文章最前面的位置,就一定能顯示縮圖了。


更多實用工具:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。