Blogger 最新回應 V2﹍頭像 + 文章標題 + HTTPS

三年前原始的版本「Blogger 最新回應＋留言者頭像＋文章標題」其實功能已經很完整，不過前幾天的最新消息「BLOGGER 支援 HTTPS」之後，幾乎所有的 Blogger 工具都將無法相容於 HTTPS 模式，瀏覽器多會出現「混合內容錯誤」。

藉這機會來更新算是使用率極高的「最新回應」工具，且整理了舊版本所有讀者的留言意見，一併改善版面配置、使用體驗、讀取速度等等，相信這個 V2 版本會是 Blogger 最佳的 "最新回應" 小工具。

以下先介紹更新的功能列表，想直接安裝請跳至「二、安裝程式碼」。

(圖片出處: pixabay.com)

一、功能更新及修正

1. 新增功能



首先看一下上圖為新版本的效果圖，新增的功能有：

• 支援 HTTPS
• 整合上下頁導航及全部開合按鈕：按鈕區域變大，操作更方便。

2. 修正功能



當使用舊版本時，有些部落格的側邊欄很短，或是使用了三欄式而導致版面很窄，就會出現上圖不佳的版面配置，此圖主要的問題有 "作者暱稱與日期無法同一行顯示"、"文章標題佔掉三行的空間" 這兩點。

新版本所有的修正項目如下：

• 日期可選擇隱藏
• 標題可選擇隱藏
• 標題強制只顯示一行(需要看完整文章標題的話，滑鼠移到標題，停留一秒鐘即可)
• 可選擇隱藏留言總數(有的站長可能不想讓過少的留言總數統計顯示出來)
• 可選擇隱藏頭像
• 展開留言、收合留言的點擊切換區域放大，便於操作。
• 舊版本無論留言摘要多短，就算不需展開留言，也會出現 "展開留言" 的切換圖示，而此版本改善了此現象。

二、安裝程式碼

如果安裝過舊版本的話，先刪除原本的小工具，按以下步驟重新新增一個「HTML/JavaScript」小工具即可。

如果沒有安裝過的話，請到後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼：


如果都使用預設值的話，直接存檔就可開始使用。

如果要修改參數請參照以上程式碼行號：

A：可參考「引用 jQuery 的注意事項」，檢查範本是否已安裝過 jQuery，如果已經安裝過請刪除此行，以免重複安裝。

G：一頁顯示幾則留言

H：留言摘要的字元數

I：頭像圖案的寬度像素 px 值；如果不想顯示頭像的話，改為 0 即可。

J~L：J、K 兩行為 Blogger、OpenID 的圖示網址；比較重要的是 L 行，請改為自訂的 "匿名頭像" 圖示網址。提醒一下，為了相容於 HTTPS 模式，網址開頭請勿使用 "http:" 字串。

M~O：請依照綠字提示註解，若不想顯示文章標題、日期、或網站總留言數，請分別更改設定為 "N"。

P：若需修改日期格式，請依綠字提示註解。

Q~T：可修改為自訂的圖示字元，請參考「copypastecharacter.com」或「特殊符號字元一覽表」。但不少字元在行動裝置、或較舊的瀏覽器版本可能無法正常顯示，請用行動裝置自行測試看看。如果想改用圖片顯示的話，請參考「四、常見 FAQ」→ Q2 的詳細說明。

U~V：這兩項可改為自訂字串，例如 "no."、"total:"。

AB~EG：如果熟悉 CSS 的話，可修改這裡的參數。

三、使用說明

如果發現這個最新回應小工具無法顯示留言，請先檢查以下項目：

1. 後台 → 設定 → 基本 → 網誌讀者 → 請檢查是否開放給「任何人」。

2. 後台 → 設定 → 其他 → 允許網誌資訊提供 → 請檢查是否為「完整」；如果不是完整而是「自訂」的話，請檢查「網誌留言資訊提供」是否設定為「完整」，這裡的設定必須是「完整」，最新回應才能顯示。

3. 請詳讀這篇「Blogger 最新回應的留言為何無法顯示？」，檢查是否為 G+ 留言框的問題。

如果還有其他問題，請看看「四、常見 FAQ」有沒有同樣案例可參考。若還是有問題請留言提出，會再補充到「四、常見 FAQ」。

四、常見 FAQ

Q1: 為什麼我安裝之後只顯示A、B、C、D、AC呢?

Ans: 如果你複製程式碼的時候，會把前面的行號 A、B、C...等都複製進去，可能你使用了冷門的瀏覽器，請改用本站推薦的 Chrome、Firefox、Opera 等瀏覽器操作，否則有那些行號的話，程式碼會無法執行的。


Q2: 不好意思請教一下，openLogo 和 closeLogo 參數，能夠餵外部圖片嗎？因為看 anonymous 和 openID 可以吃外部圖片，所以試著把 opneLogo 也改自己的圖片，但似乎無法生效。向您確認一下是否可以這樣做呢？

Ans: 如果要使用圖片的話，請將字串改為以下格式：

openLogo: "<img src='//2.bp.blogspot.com/-M8w-I9JbTLE/VXPsl-omIAI/AAAAAAAAL3Y/DtpaY-xjFY0/s14/right.png'/>",

藍色字串改為自訂圖片網址即可，closeLogo 的改法以此類推。

而使用圖片時，「上一頁/下一頁」按鈕，無論有無作用，顏色都會一樣，那麼可在 CSS 最後一行插入以下語法：

#rc2_switchPage span {
opacity: 0.5;
}
如此可讓無作用的按鈕，圖案的顏色較淡，以示區別。


Q3: 我是從別的blog搬過來的，我試過這個版本與另一版本(無留言頭像)，都會出現同樣的狀況：出現留言重複&出現"文章已刪除"，但實際上，文章是存在的，並沒有刪除… 是因為我從別的blog匯入的關係嗎?還是我需要做什麼樣的修改?

Ans: 留言顯示 "文章已刪除" 的話，代表那篇留言對應的文章網址是不存在的，這表示 feed 裡面的資料是錯誤的。而為何會出錯，可能如你提的 "是因為我從別的 blog 匯入的關係嗎"，也許在匯入的過程系統產生了問題。

我想到的解決方法是，先從出問題的留言，找到對應的出問題的文章，將文章刪了，再重新匯入那幾篇文章試試看。


Q4: 正在試用您的「最新留言」功能，顯示結果，一直在繞圈圈耶，沒有任何畫面出現，請問哪邊出了問題呢?

Ans: 測試過後, 程式碼正常沒有問題. 我注意到你使用的是特製範本, 非 Blogger 官方範本, 所以無法知道會是什麼地方與本文的「最新回應」小工具相衝. 只好請你改用「舊版本1」或「舊版本2」。

更多 Blogger 留言工具：