藉這機會來更新算是使用率極高的「最新回應」工具,且整理了舊版本所有讀者的留言意見,一併改善版面配置、使用體驗、讀取速度等等,相信這個 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX-5c3SSZgh91PXNJ1z3sjZYfdhr6lLYJvpjAvH8n5_MmkTS-YuUTrl8W5VWtAUyg7BngtAXesEZ-vMuV2zZHFdEhqm3j98jMlS-A-xgR4l-CuD31312-TkBuWobH1nqfuEg6I2RhZYiZy/s14/right.png'/>",
藍色字串改為自訂圖片網址即可,closeLogo 的改法以此類推。
而使用圖片時,「上一頁/下一頁」按鈕,無論有無作用,顏色都會一樣,那麼可在 CSS 最後一行插入以下語法:
#rc2_switchPage span {
opacity: 0.5;
}
如此可讓無作用的按鈕,圖案的顏色較淡,以示區別。
Q3: 我是從別的blog搬過來的,我試過這個版本與另一版本(無留言頭像),都會出現同樣的狀況:出現留言重複&出現"文章已刪除",但實際上,文章是存在的,並沒有刪除… 是因為我從別的blog匯入的關係嗎?還是我需要做什麼樣的修改?
Ans: 留言顯示 "文章已刪除" 的話,代表那篇留言對應的文章網址是不存在的,這表示 feed 裡面的資料是錯誤的。而為何會出錯,可能如你提的 "是因為我從別的 blog 匯入的關係嗎",也許在匯入的過程系統產生了問題。
我想到的解決方法是,先從出問題的留言,找到對應的出問題的文章,將文章刪了,再重新匯入那幾篇文章試試看。
Q4: 正在試用您的「最新留言」功能,顯示結果,一直在繞圈圈耶,沒有任何畫面出現,請問哪邊出了問題呢?
Ans: 測試過後, 程式碼正常沒有問題. 我注意到你使用的是特製範本, 非 Blogger 官方範本, 所以無法知道會是什麼地方與本文的「最新回應」小工具相衝. 只好請你改用「舊版本1」或「舊版本2」。
更多 Blogger 留言工具:
感謝WFU,不愧是V2,這次比較帥多了!
回覆刪除你好
回覆刪除我的blogger首頁有放了圖片輪播
所以已經有了 script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' 這行
如果想使用這篇文章使用的"最新文章V2",需要再使用一次上面那行嗎?
目前的情況是,上面那行是在 /head 前,但不是在前一行,大約…前20行吧
(連同其他語法共20行,該行為20行語法的第一行)
如果把那行移到 /head 前一行,"最新文章V2"能正常運作,但輪播會失效
但如果不移到 /head 前一行,則輪播正常,"最新文章V2"無法顯示(一片空白)
如果不移動該行,然後在版面配置裡新增"最新文章V2"時連同該行一起輸入
則輪播依然失效,"最新文章V2"正常顯示
請問這樣是正常的嗎?有沒有辦法解決呢?
謝謝
好的,麻煩您了
刪除請問方便寄EMAIL給您嗎?
隨信附上後台"編輯HTML"中的完整內容(用記事本夾檔)讓您觀看
剛剛裝了,目前看來挺好用的。謝謝。
回覆刪除你好, 剛更新了你的留言版本, 謝謝!
回覆刪除我只想顯示讀者的留言, 不想顯示自己的回應, 能收改html 嗎?
不會改:)
刪除这篇文章对我很有帮助,非常感谢您提供这么多的资讯~
回覆刪除感謝您的指導,太有幫助了
回覆刪除通常我在判別 http:和https: 時,會醬寫 https?:
回覆刪除感謝教學!終於找到看得懂而且能用又好看的😂
回覆刪除想請問下方按鈕可以改成只要上下頁,不要展開收合嗎?
還有按鈕跟圖示可以改色嗎?
想請問以下異常是……因為我自己的疏失造成的錯誤,還是大家都有出現此情況?(實名留言者被判斷為匿名、頭像似乎出現問題……等)(本人使用的是awesome inc範本)
回覆刪除後台狀況:https://drive.google.com/file/d/1tozlg2_afsL9cvyp1WH1svLrwYUvC0d6/view?usp=drivesdk
小工具呈現:https://drive.google.com/file/d/10uAYwbNUeX2sXD2JI336lUc2o1g2bnzG/view?usp=drivesdk