Blogger 修改留言者的各種身份頭像顯示＋尺寸變更

一、前言

Blogger 留言身份主要有幾種：

◎ 有帳號：Google、Open ID (Google 以外的帳號，如 yahoo、facebook...)
◎ 無帳號：有名稱、匿名

1. 當使用 Google 帳號留言，會檢查是否有頭像。如果有的話，會強制以 35 x 35 的大小顯示；如果沒有的話，會顯示 16 x 16 的 Blogger 小圖示

2. 當使用 Open ID 帳號留言，會顯示 16 x 16 的小圖示

3. 當使用無帳號留言，自然無頭像顯示。如果想讓無帳號顯示圖案，得自行準備並用判斷句讓不同身份能顯示不同圖案。

由於 16 x 16 的圖示(Blogger、Open ID)與 35 x 35 的頭像並存不太美觀，而且連 35 x 35 的尺寸看起來都有點小，因此本文的 hack 目標是將所有圖示都改為 45 x 45 顯示。如果想要將頭像改為自訂的尺寸也是可行，請按本文的內容修正即可。



二、準備動作

準備各種圖示：

為了顯示 45 x 45 的圖示，請先準備以下的圖案，長寬比例為 1：1，尺寸最好是長寬各乘以二 90 x 90 以上，將圖案放在自己的網頁空間：

1. 匿名者圖案
2. 無帳號但有留名者圖案
3. Open ID 大圖示 (可到「此網頁」下載各種尺寸的大圖示)
4. 自己的頭像(如果有安裝「作者回應」的功能)
5. 與自己留言區塊底色相同的空白圖，不過尺寸 45 x 45 即可

如果想自訂顯示尺寸的話，例如 60 x 60，準備的圖案最好是 120 x 120，因為現在螢幕多為大尺寸 LCD，瀏覽器可能會縮放到 200%，準備比較大的圖案才不會因為放大後而模糊。


安裝頭像功能：

如果尚未安裝頭像功能的話，請按此「教學網頁」安裝頭像。根據此網頁，要 hack 的原始碼為：

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>


三、自訂各種身份頭像

到 Blogger 後台 → 範本 → 編輯 HTML。請將上段的原始碼插入以下的紅、藍色部分：


顯示各種圖示：

D：每則留言的分隔線。（加不加視個人需求）

G：當留言者有帳號時──

H：印出頭像或小圖示。

而有帳號無頭像會顯示的 16 x 16 小圖示，Blogger 圖示可用 CSS 將圖放大而不失真， 此留待下一段說明；但 Open ID 圖示放大可是不忍卒睹，因此得另外處理。I～M 行即是變通之策，另外弄張圖覆蓋原本的圖示。

如果不想用覆蓋的方式處理，而是全部丟進 javascript 用判斷式處理，由於 <data:comment.authorAvatarImage/> 裡面的內容 Blogger 可能不想被 hack，所以丟入 javascript 是無法處理的。

J：<data:comment.authorUrl/> 存放留言者個人簡介的網址

K："&lt;" 代表 "<" 符號；若是 Blogger 帳號的簡介網址，必含有 "blogger" 這字串，因此利用 search 函數搜尋此字串，若找不到則確定此帳號為 Open ID。

L：印出準備好的 Open ID 圖示，藍色部分請改為自己 Open ID 圖檔的存放位置。 由於 H 行已經印過一次 Open ID 放大模糊的圖，本行印出的圖必須覆蓋原圖，否則沒改變 style 就會有兩個 Open ID 圖示了。使用以下參數覆蓋原圖：

"position:absolute"：強制固定位置
"z-index:2"：將此圖拉到上層，原圖就跑到下層了。
"left:4px; margin-top:0px"：調整座標
"height='47px' width='47px'"：長寬稍微比 45 大一點，以求四邊都完整覆蓋原圖。

N～O：當留言者無帳號且匿名時──

P：印出準備好的匿名圖案，藍色部分請改為自己匿名圖檔的存放位置。

"float:left"：讓圖案出現在最左邊
"height='45px' width='45px'"：長寬設定為 45 x 45 顯示

Q：當留言者無帳號但有留名時──

R：印出準備好的留名者圖案，藍色部分請改為自己留名者圖檔的存放位置；style 的參數請參考 P 行。


放大各種圖示：

做完以上動作後，除了自己準備的圖示以外，有帳號的圖示還是只能以預設的 35 x 35 顯示，因此必須藉助 CSS 來變更，接著將 X～AA 放在範本中的 CSS 段。

其中 X～Y 參考「此網頁」調整圖像區域的位置，這兩行可正確執行無誤；而 Z～AA 主要參考「此網頁」來放大官方預設圖示大小，但不知為何按該網頁的寫法無法產生效果，甚至會變成高度拉長、寬度不變的長條圖案。測試很久，最後在 Opera 的 DragonFly 輔助之下終於找到正常顯示的語法。

X：設定縮排的方式，將留言區塊貼在左邊邊界，請注意 ".avatar-comment-indent" 必須緊貼在 "#comments-block" 之後，不能有空格，否則無效果。

Y：設定圖像區域的位置。

Z：此行幫頭像加入背景圖。參數設為 width: 45px; height: 45px 後，頭像最大就可顯示 45 x 45，因此此行是改變頭像尺寸的關鍵；而藍色部分請改為自己空白圖檔的存放位置

AA：此行的設定將所有頭像、小圖示一律放大到 45 x 45。因此，想要自訂顯示尺寸的話一定要修改 Z～AA 行。

以上兩行跟「參考網頁」略有不同，Z 行必須加上 "#comments-block " 才能發生作用，真正原因不得而知，不知是否為範本不同的原因？


四、「作者回應」功能的頭像

至此已經修改完成，不過如果有安裝 Sean 大的「作者回應」功能，那麼請繼續看完這一段的修改。打開下載的「ar.js」後，要修改的原始碼為以下的部分：

CommentFooters['c'+replyID].innerHTML += '<hr noshade size="1" />
<div align="left" style="background-color: lightyellow; padding: 4px">
●<b style="color: blue">作者回覆</b>：
'+replyMsg+'
<br/><div align="right" style="font-size:8pt; color:darkgray">
'+elCommentFooter.innerText+'</div></div>';
以上原始碼是連在一起的，但為了閱讀方便將不同標籤拆成多行。以下紅色部分 C～F 行為頭像功能主要修改之處：


B：此行可修改作者回應區的背景顏色

C：頭像的超連結，官方預設為作者的個人簡介網址，因此請將此行改為自己的簡介網址。找出個人簡介網址的方法請見「讓 Blogger 能作者回應與留言編號共存」的第四節「判斷留言者是否為文章作者」。

D：頭像圖檔的網址，請改為自己頭像圖檔的存放位置。

E：提示文字的超連結，官方預設為作者的個人簡介網址，同 C 行請改為自己的簡介網址。

F：自設的提示語，請調整為喜歡的樣式、字體、文字等等，尤其一定要換成自己的暱稱啊！

H：可修改留言時間的顏色、字體等。

以上 A～H 修改完後請記得全部連為一整行(不可斷行)，再存回「ar.js」，上傳到自己的網頁空間。


終於大功告成了，想看看效果可參考「BLOG 留言板」這個網頁，下一篇的主題是讓留言區增加「回覆」、「引言」的功能。

讓 Blogger 的留言有"回覆"及"引言"按鈕


參考網頁：
秀出你的大頭來‧Blooger新增留言者頭像圖片功能
Show avatars on Blogger Comments
讓 Blogger 的意見回應可以有作者回覆
Blogger: Un poco más sobre los avatares