公告版位

Blogger 預設的留言頭像為正方形,有沒有發現「Google+」使用的頭像為圓形?由於 Blogger 預設的頭像尺寸很小,如果想將原本的正方形直接改為圓形,頭像會顯得太小。


(Pic from: freepik.com)


所以得先將 Blogger 頭像的長、寬都加大,再改成圓形,版面才比較美觀。本文將詳細說明如何修改頭像圖案的 CSS 語法參數,來達到需要的效果。


一、新舊範本的差異

過去曾在「Blogger 修改留言者的各種身份頭像顯示+尺寸變更」修改過頭像,不過那一篇文章只適合舊範本使用。現在大部分的讀者都是使用新範本,使用「Google Chrome 開發人員工具」來檢查後,發現新範本的 CSS 改法不太一樣。

因此使用新範本的讀者,請按照本篇的語法來修改。


 

 




二、留言頭像的 CSS 程式碼

如果知道 Blogger 範本中的 CSS 區段在哪,那麼可直接將本文的 CSS 程式碼複製過去。

如果不清楚的話,請到 Blogger 後台範本 → 編輯 HTML → 搜尋 </head> 字串 → 在其前一行插入以下程式碼──


先別急著存檔,以上這些參數,頭像的效果大致像這樣──

全文已移往WFU BLOG 主站,請點:「Blogger 修改留言頭像尺寸及形狀的 CSS 語法

創作者介紹

WFU BLOG

Wayne Fu 發表在 痞客邦 PIXNET 留言(9) 人氣()


留言列表 (9)

發表留言
  • Catherine Huang
  • 版主您好,安裝了這個好用的Hack後。

    卻發現文章留言中無法顯示的個人圖像卻顯示出來了。

    但文章中的頭像還是依然無法顯示正常。

    參考您有關於留言的文章,都無法找到相對應的CSS碼。

    也有使用了" 將迷你組件範本回復為預設值" 大絕。

    但都沒有改變,想請問這個問題該如何解決呢?
  • Wayne Fu
  • <393964815549473214>(以上內容請勿刪除,從括號之後開始留言)這情形的確滿奇怪的,我看你的最新回應小工具,頭像是正常顯示的,但是文章的留言區塊裡面,頭像全部變成匿名頭像。

    感覺上這問題或許跟本文的 CSS 碼沒關係,因為 CSS 只會改變樣式,應該不會改變圖片網址才是。請問確定是裝了本文的 CSS 碼後,馬上變成匿名頭像嗎?

    你可以試著把本文的 CSS 程式碼全部移除,如果仍是匿名頭像,那就表示是別的原因(可能裝了別的外掛引起的);如果頭像恢復正常,那就是本文 CSS 碼的關係。

    如果找不出原因,由於我也沒遇過這情形,也許要請你上 Blogger 社群看看有沒有其他成員遇過了:https://plus.google.com/communities/103807083735607134704
  • 吳佳容
  • 我可以請問你,這個語法在痞客邦可以使用嗎?
  • Wayne Fu
  • <8146702805653577646>(以上內容請勿刪除,從括號之後開始留言)Blogger 跟 痞客邦 使用的 CSS 語法一定不一樣的。我猜你可能對 CSS 不太熟,那麼就幫不上忙了...如果對 CSS 熟的話,用「<a href="http://wayne-fu.blogspot.tw/2012/10/chrome-developer-tool.html" rel="nofollow">開發人員工具</a>」就能找出 痞客邦 頭像修改的地方了。
  • AI
  • <4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)
    版主您好,在下的情況與Catherine的情況相同,情況更是未有加上額外CSS,於所有預設模版中的情況出現的。個人圖像唯一能成功顯示,就只有套用動態檢視模式,所以在下敢斷言與CSS無關,但卻找不到原因。
  • Wayne Fu
  • <2549300641848573485>(以上內容請勿刪除,從括號之後開始留言)可能是裝了某個外掛引起的,造成blogger留言的js執行錯誤。如果將範本恢復為預設值還不行的話,那就必須將範本中的所有安裝過的外掛 javascript 一一試著移除來比對才能找出答案了。
  • Catherine Huang
  • <4428146574373225813>(以上內容請勿刪除,從括號之後開始留言)

    你的小工具頭像顯示成功,但我的主留言頁面還是不行。

    移除小工具也是一樣,所以排除互相影響的問題。
    試過網上幾個排除方法也是一樣,所以放棄了XD
    不過還是很謝謝你,小工具很好用!!!

    看你最近有來"頭像TEST"所以來打個招呼:P
  • Wayne Fu
  • <120068413463375215>(以上內容請勿刪除,從括號之後開始留言)因為當初認為你的狀況是特例,沒想到留言 #4 AI 表示也有相同狀況,所以不好意思到你的網站做了個測試...XD

    可惜仍看不出原因,只能如留言 #4 的回覆進行,看能否找到答案了。
找更多相關文章與討論