設定留言回應編號，讓部落格互動更活潑

常看到別人的回應留言區有這個功能，在部落格裡喊話，幾樓的聽到了嗎?覺得很有趣，這個留言編號的功能讓部落格主和網友的回應不僅是一對一的直來直往，更能交叉留言，讓部落格上的消息傳遞更迅速與多樣化。

2009.11.7更新，
因為blogger官方釋出大頭圖像的功能，原先的模板修改方式已不適用，更換模板者，請參考這篇的作法，
回應編號與留言者大頭無法並存之解決之道

會想裝這個Hacks其實是針對很多朋友來這裡找尋blogger版面的設定技巧，其實許多細節或是功能，我自己本身不熟或是沒有接觸，但是都會有許多好朋友跳出來幫我解決或是分享他們改版的經驗，像是阿榮教練及南野紗羅等，我很感謝他們，有時回覆留言中無法正確指出回應的是那一則，因為blogger官方制式的規定，無法針對某一則直接回應，而都是放在最下方，所以裝上這個Hacks或許也能解決一些流程上的錯誤與遺漏吧。

這是Google Blogger專用的，如何操作呢?(記得原先的template要備份留存)
進入後台→版面配置→修改Html→勾選展開小裝置範本，然後找到下面這一區就是dl到/dl這塊回應的程式區
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
然後以下列程式碼代替
<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</div>

</b:loop>
</dl>

然後在CSS程式區，找到Comment這區，加入下列定義：
.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;}

其中的顏色與字型大小，可以自己修改，這是我參考下面的文章作成的，依他的方法沒法成功，將回應編號定義改成.comment-number，就能出現了，如果你的部落格留言較多時，不妨可以考慮使用這個Hacks，像我另一個網站東京封印留言數寥寥，就不用使用這個了，只有1、2樓也沒啥意思了，哈。

參考來源：
Comment numbering in Blogger