2015年10月10日

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

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

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

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

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

(圖片出處: pixabay.com)


一、功能更新及修正


1. 新增功能

blogger-recent-comment-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

首先看一下上圖為新版本的效果圖,新增的功能有:
  • 支援 HTTPS
  • 整合上下頁導航及全部開合按鈕:按鈕區域變大,操作更方便。


2. 修正功能

bad-blogger-recent-comment-Blogger 最新留言 V2﹍頭像 + 文章標題 + HTTPS

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

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



二、安裝程式碼


如果安裝過舊版本的話,先刪除原本的小工具,按以下步驟重新新增一個「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 留言工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

11 則留言:

  1. 感謝WFU,不愧是V2,這次比較帥多了!

    回覆刪除
  2. 你好
    我的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"正常顯示

    請問這樣是正常的嗎?有沒有辦法解決呢?
    謝謝

    回覆刪除
    回覆
    1. 好的,麻煩您了
      請問方便寄EMAIL給您嗎?
      隨信附上後台"編輯HTML"中的完整內容(用記事本夾檔)讓您觀看

      刪除
  3. 剛剛裝了,目前看來挺好用的。謝謝。

    回覆刪除
  4. 你好, 剛更新了你的留言版本, 謝謝!
    我只想顯示讀者的留言, 不想顯示自己的回應, 能收改html 嗎?

    回覆刪除
  5. 这篇文章对我很有帮助,非常感谢您提供这么多的资讯~

    回覆刪除
  6. 感謝您的指導,太有幫助了

    回覆刪除
  7. 通常我在判別 http:和https: 時,會醬寫 https?:

    回覆刪除
  8. 感謝教學!終於找到看得懂而且能用又好看的😂
    想請問下方按鈕可以改成只要上下頁,不要展開收合嗎?
    還有按鈕跟圖示可以改色嗎?

    回覆刪除
  9. 想請問以下異常是……因為我自己的疏失造成的錯誤,還是大家都有出現此情況?(實名留言者被判斷為匿名、頭像似乎出現問題……等)(本人使用的是awesome inc範本)

    後台狀況:https://drive.google.com/file/d/1tozlg2_afsL9cvyp1WH1svLrwYUvC0d6/view?usp=drivesdk
    小工具呈現:https://drive.google.com/file/d/10uAYwbNUeX2sXD2JI336lUc2o1g2bnzG/view?usp=drivesdk

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP