2009年2月11日 星期三

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


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


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樓也沒啥意思了,哈。

18 則留言:

  1. 你也換版面拉~
    我比較喜歡這個 XD

    回覆刪除
  2. 我之前就裝了,
    最大的功能,就是...
    可以知道自己在幾樓?!呵呵
    說真的視覺上感覺很好,
    不過還是最希望blogger的內嵌留言可以有留言有大頭圖示的就好了!

    回覆刪除
  3. To Xavier,謝謝,換個心情吧。
    To 小白,大頭的功能還真的不錯,希望Google加加油摟。

    回覆刪除
  4. 感謝您的資訊,設定成功了!
    時常來您這,讓我經常有收獲;
    也有不少網友,問我一些設定問題,
    我也都推薦您這裡!謝謝您的熱心與資訊。

    回覆刪除
  5. 很喜歡你拍的照片,雖然攝影我不懂,但是總是想認真從你那裡學到一些知識呢。

    回覆刪除
  6. 被你寫進去了,真不好意思...(臉紅)

    我也較喜歡這個版面~載入速度好像也快很多!

    回覆刪除
  7. 好人要表揚的,好像大部分都喜歡留白的版面,簡單快速我想是很重要的,我也在學習中。

    回覆刪除
  8. 這個不錯~
    不過..."只有1、2樓也沒啥意思了"
    真是一句話刺到我心坎裡...XD

    回覆刪除
  9. 摸頭,你太謙虛了,我是說我自己啦。

    回覆刪除
  10. 新版面!新氣象!速度快!感覺好 ^^

    回覆刪除
  11. 說得好!不過有些東西還沒裝呢。

    回覆刪除
  12. 您好:
    最近剛用Blogger想請您幫忙設定版面,不知您是否有興趣接案?請來信taiwan.cfp鼠gmail.com

    回覆刪除
  13. 抱歉,我誤會你的意思了,我再回信給你。

    回覆刪除
  14. 很好的東西,可是我沒有安裝成功!><
    已經跟足教學了,可是沒效果。

    回覆刪除
  15. 嗯,那個你的部落格上還沒有留言,看不出效果,你有自己先留言測試嗎?如果真的不行,因為我有改某些定義,可以試試原作者的方法看看,http://www.bloganol.com/2008/10/comment-numbering-in-blogger.html

    回覆刪除
  16. 成功謝謝!
    不過,如何修改成:
    最新留言在上
    最早留言在下的排序方式?

    回覆刪除
  17. 那可能要有高人來設計Hacks程式了。

    回覆刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能