2011年9月7日

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

A+
一、前言

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

2 則留言:

  1. 我將留言者頭像放大到100px,導致使用Blogger 個人檔案或沒有使用Google+之訪客的頭像會變得很模糊。

    回覆刪除
  2. <7264168840016419802>(以上內容請勿刪除,從括號之後開始留言)你留言留錯篇啦,這是 2011 年、舊範本的文章。不過你想表達或詢問什麼事情,請再斟酌一下你的敘述內容。

    回覆刪除

張貼留言注意事項:

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