2015年7月28日

Blogger 放大留言頭像尺寸的 JS 語法

A+
過去曾寫了幾篇關於修改 Blogger 頭像尺寸的文章,例如「舊範本修改各種身份頭像」、「新範本修改留言頭像尺寸及形狀的 CSS 語法」。

不過最近 +toa to 於這個「Blogger 中文社群討論串」表示, "最近發現,雖然把頭像變大了,但網址還是s35-c,導致圖片看起來很模糊"。後來仔細想了一下,當初寫 CSS 修改語法時,並不會有這樣的問題,那麼大概是 Blogger 有什麼地方做了變動,因此無法再用 CSS 語法就能處理這件事。

以下先大致說明前因後果、需要解決的問題,想直接安裝請跳「二、準備動作」。

(圖片出處: pixabay.com)


一、需要克服的問題


1. Blogger 的修正

以前 WFU 發現留言者頭像有個大問題,若上傳的頭像尺寸很大,那麼當留言數量很多時,光是讀這些頭像圖檔,就要花很多流量與載入時間。

正因為這些原始的頭像圖檔尺寸可能都很大,那麼之前寫的「新範本修改留言頭像尺寸及形狀的 CSS 語法」,只要透過設定 CSS 寬度,就足以變頭像尺寸、且不會失真。


2. 產生的問題

現在 Blogger 強制將所有留言頭像改為 35 x 35 的尺寸,也就是有帳號的頭像圖檔網址參數一律成為 "s35-c":
  • 好處如上述所提,可以大大提升網頁載入速度。
  • 壞處就是,無法再經由修改 CSS 來改變真實的頭像圖片尺寸。
  • 解決方法為,另外寫 JS 來動態修改圖片尺寸。


3. 各種頭像身份

然而,依據留言者身份的不同,會出現各種的頭像圖案,因此本篇的 Hack,也必須一併處理下列這些身份的頭像尺寸:
  • Blogger 帳號未設定頭像
  • OPEN ID
  • 匿名、無帳號的頭像



二、準備動作


本篇的 Hack 只能做到用 JS 修改圖檔網址及參數,還需要另外設定 CSS 才能真正變更頭像尺寸,因此請務必先參考「Blogger 修改留言頭像尺寸及形狀的 CSS 語法」的流程,設定完所有 CSS 參數。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


以下參數修改請參照以上程式碼行號:

E:紅色參數輸入頭像的長寬像素值。

因為桌機的螢幕多半很大,瀏覽器必須將網頁放大顯示,為了讓頭像不模糊,如果頭像在「二、準備動作」想要顯示的尺寸,CSS 設定為 50px 的話,建議 E 行參數設定為 100,將圖片尺寸先行放大為兩倍,這樣瀏覽器顯示頭像的效果會比較清晰。

F:藍字圖片網址可置換為自訂的 "無帳號頭像圖案"

G~H:如想使用自訂的 Blogger 帳號、OPEN ID 圖案,可置換藍字圖片網址。

以上修改完,存檔即可看到效果。


更多 Blogger 留言相關工具:

1 則留言:

  1. 喔喔喔~~WFU的動作好快!
    非常感謝~~現在就來試試看~

    回覆刪除

張貼留言注意事項:

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