回應編號與留言者大頭無法並存解決之道

2010.8.24更新，
這個Hacks在IE底下，無法正常顯示。

今天Steven來詢問我重新安裝模版後，原先的讀者的回應編號無法出現，看了一下原始碼，發現應該是最近blogger官方釋出大頭圖像的影響，原先的方式請參考設定留言回應編號，讓部落格互動更活潑，因為單獨回應的話也要寫上一大篇，乾脆寫成文章，不一定自己換模版時也用得到。

如果你在blogger最新改版後，有換模版且碰到這個問題，請利用下列方式，讓你的留言也有編號功能。

我以自己寫的這篇設定留言回應編號，讓部落格互動更活潑，來做比對說明，安裝更簡單了，如果你是新換的模板，記得原先的安裝要拿掉，用以下的方式即可，如果是舊的，應該Blogger會自行調整，不會有問題，因為我自己的是沒問題，也沒人來跟我反應過。

原先模板記得備份，進入後台，版面配置→修改Html→勾選"展開小裝置範本"
先在CSS程式區，找到Comment這區(將它放在]]></b:skin>之前即可)，加入下列定義：
.comment-number {
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: 0px; /*comments-counter position*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 24px;
line-height:26px;
font-weight: bold;
}
/*since the numbers are actually links, we need to force the color properties*/
.comment-number a:link, .comment-number a:visited {color: #445566 !important; text-decoration: none !important;text-decoration: none;}
.comment-number a:hover, .comment-number a:active {color: #FF9933 !important; text-decoration: none !important;}
然後找到'comments-block'這個關鍵字，你會發現變成有兩段語法，一個是原先的意見區位的設定，另一個就是後來新增留言者大頭的區位，我們要修改的是第二段的'comments-block'，類似以下這樣，。
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
你在這中間(第二行)加上
<script type='text/javascript'>var CommentsCounter=0;</script>
就會變成，如下圖這樣，


然後再下方一點，找到
<data:commentPostedByMsg/>在下方加入以下語法即可，
<span class='comment-number'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
如下圖這樣，


這樣你的回應編號應該就能正常顯示了，但我想當初設計者設計時還沒有大頭的出現，所以綸太郎提供這方法，是我自己研究出來的，可能有些模板不適合，大家可以互相討論看看。

延伸閱讀：
設定留言回應編號，讓部落格互動更活潑