2007/09/26

讓blogger(blogspot)的回應區(comment)出現大頭照




這個功能主要是可以在回應區顯現回應者的照片, 可為回應區加分不少. 改程式的方法大約幾個步驟, 只要小心修改, 應該不算太複雜.





當然囉, 改範本前, 一定要先備份好template啊!

以下是操作步驟.

1. 編輯 HTML-->展開小裝置範本

2. 在以下程式碼之後

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>


加入這段程式碼

<div style="clear:both">
<dt style="float:left;margin-right:5px;clear:both;" expr:id='"commentphoto" + data:comment.id'></dt>
<b:if cond='data:comment.authorUrl'>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':'<data:comment.authorUrl/>'});</script>
<b:else/>
<script type="text/javascript"> if(typeof(commentPhotoIds) == 'undefined') var commentPhotoIds = []; commentPhotoIds.push({'id':'commentphoto<data:comment.id/>', 'url':''});</script>
</b:if>


3. 慢慢往下拉一下下, 找到</b:loop>
在</b:loop>之前 加入 </div>

4. 在 </body> 前, 加入以下這段程式碼


<script type='text/javascript'>//<![CDATA[function commentPhotoDo() {var tag; for(var i = 0; i < commentPhotoIds.length; i++) { tag = document.createElement('script');tag.type = 'text/javascript';tag.src = 'http://scrape.singpolyma.net/avatar.php?maxwidth=60&url='+encodeURIComponent(commentPhotoIds[i].url)+'&id='+encodeURIComponent(commentPhotoIds[i].id)+'&defaultimage='+encodeURIComponent('http://img139.imageshack.us/img139/1011/defaultavatarad7.png');document.body.appendChild(tag);}//end for var i in commentPhotoIds}//end function commentPhotoDo if(typeof(commentPhotoIds) != "undefined") commentPhotoDo(); //]]></script>


儲存後, 沒有錯誤訊息, 應該就大功告成了!
 

來源

New Comment Photo Hack (Blogger)

相關文章 :

36 comments:

毛毛牙 提到...

多謝指導,回應區看起來可愛多了。

Skyvee 提到...

毛毛牙,
看到照片的感覺的確親切多了呢! :)

耳機版 提到...

感謝 已經用在部落格裡了
雖然我的部落格留言不多

Skyvee 提到...

:) 您客氣了, 您才剛開版不久, 已有不少留言呢!

◤kahyan™◢ 提到...

这个有趣,可惜我的版放了却不美~

一片雲 提到...

哈,改了好久~
總算弄進去了,主要都是因為我太龜毛的關係啦XD。
感謝囉!
附帶一提:要改'匿名"使用者圖片的話,最後一段javaScript裡的網址:'http://img139.imageshack.us/img139/1011/defaultavatarad7.png'
改成你要的圖就行囉~

Skyvee 提到...

Kahyan, 你的部落格目前的樣子挺好呢!

Skyvee 提到...

謝謝 一片雲的補充! XD

SuwaN 提到...

哇!你真的教了

谢谢^^

小賤健 提到...

嘿嘿,多謝 skyvee。
雖然我沒有把回應區大頭照給掛上,不過我卻在這區塊裡「偷」了您的 comments style,再變了個樣。希望 skyvee 別介意才是m(_._)m

SuwaN 提到...

呵呵
你偷的我看了也有点兴趣~哈哈!
希望下次SKYVEE得空再教..嘻嘻!

NW 提到...

又學到一招了 感謝~

Skyvee 提到...

大家客氣了, 這些很多都是倚賴網路上的資源啊!就請隨意吧!
看到各位的 blog 版型, 真是令人驚豔啊!

雙羊 提到...

給 skyvee,

我花了好長好長的測驗時間終於搞定 (呼~~),原本我按照你的方式改好,結果我的 comment.id 無法像你一樣列在對話框框上面,而跟我下方的留言方塊疊到了 (嗚嗚,當時真想哭 :::> <:::),後來我按照往例用土法煉鋼的方式,終於試出來該改哪一個 #comments-block,現在終於真的成功了,謝謝。

skyvee 提到...

雙羊, 哇, 真佩服你呢!很有決心,因為每個blog template, 多少有些不一樣, 所以文章提到的方法,可能無法完全套到每一種template. 但是你很有辦法呢!能夠用土法煉鋼改成想要的樣式, 這也不是很容易的!

雙羊 提到...

我一直以來都是土法煉鋼,常常覺得我的 CSS 不知道有沒有被我改歪了,哈哈。

我的心得是要具備推理精神,假設、實驗、求證...有時候改的頭很大,因為 blogger 裡面很多是變數 Orz,懂得人很輕鬆,我都是看英文猜猜看,然後改個東西去看實際影響在哪,這些心歷過程有痛苦、有煩躁,也有最後成功的喜悅,挖嗚。

我現在在研究你的這一篇一次將 13 個社群書籤加入至部落格,因為我有看到wordpress有一個外掛好棒啊...這個share this可以讓頁面不那麼亂,又可以展開收合,真是太好用了,可惜我不知道這個要怎麼放在 blogger 就是了。

還有我每次要找什麼 hack,估狗估估估,怎麼估都會估到你家,哈哈 (Y)。

Skyvee 提到...

雙羊, 謝謝提供 share this 的資訊, 有空我也來研究看看! 不過還是希望已有人先研究出來,就更好囉! :p

Max 提到...

很棒的功能,並且我借用了你的匿名的圖示,感謝。

Skyvee 提到...

別客氣, 請拿去用吧!這也是網路上的資源.:)

8632271 提到...

已經改了,順便放上兩張無名的匿名圖給各位

http://tudang.org/uploads/986dfe4835.gif
http://tudang.org/uploads/75748b963a.gif

Skyvee 提到...

謝謝, 圖片好可愛, 不知這些圖片有沒有版權問題? :)

純白色 提到...

我的大頭還是不會正常顯示..."

Skyvee 提到...

嗯,會不會跟其他的js有衝突到?不好意思,我目前也沒有頭緒... ><

九月 提到...

我改完了,可是完全沒有改變耶@@"
大家都成功了,難不成我又耍笨…

九月 提到...

成功了!
原來修改程式碼以前的留言不會跑出大頭貼
要之後的留言才會有^^
漂亮多了,感謝Skyvee^^

skyvee 提到...

這個大頭照, 不適用某些樣板上, 所以如果出不來, 就很難找問題... 我自己後來也不用了..因為改一下css, 就會動到格式, 還要再調..很麻煩.(偷懶)

小白 提到...

我試了大頭照的程式失敗了,
不知道是不是版型的關係,
另外,有沒有人知道"張貼意見",
下方打字的框框內可以加入底圖嗎?
要加在哪裡呢?
我研究了很久都試不出來...

[ RDIA ] 提到...

這好像也不適用於 新的內坎留言 囧

還是謝謝你的教學

小白 提到...

在設定->意見->下方有一個"在意見上顯示簡介圖片?"
這個選項會影響到照片顯示嗎?
可惜我兩種都試了還是不出來,
沒有大頭照感覺遜色不少,真可惜!
官方不知道有沒有在開發這功能...

skyvee 提到...

RDIA,是的,這功能不適用內嵌留言.

小白,你的留言是選擇內嵌式嗎?如果是的話,就無法顯示照片囉!

小白 提到...

我的留言是選擇內嵌式,
原來這樣不能顯示喔~
真不知道google在想什麼?
這應該是blog理當有的功能呀~

shiping 提到...

這個的程式我找打了~
可是沒有照片顯示出來喔~~~><

Skyvee 提到...

詩萍, 你選擇的留言模式是在文章那一頁就能直接輸入,這叫內嵌式,所以大頭照這個hack不適用哦!

shiping 提到...

哦...我明白了...謝謝你

匿名 提到...

請問這個 hack 現在失效了嗎?

tune 提到...

ya~ 感謝!!我成功囉 :D

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.