2009年11月7日 星期六

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


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>

如下圖這樣,


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

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

31 則留言:

  1. 綸太郎,
    您真是太強了,回應速度又快,
    真的很佩服您的功力與熱心,
    也難怪您的部落格人氣這麼旺,
    我剛發現您的PR=4吔...,真強!

    回覆刪除
  2. 唉,pr4已經很久了,都沒有進步,回應快,是因為剛好有時間亂改,也不一定符合每個模版的需要,謝謝鼓勵。

    回覆刪除
  3. pr4真的很強了,
    在台灣我印象中好像最高都只看到pr=5...
    我想,可能和語系的全球性也有關係吧?

    回覆刪除
  4. 說的也是,不退步就很值得高興的,繼續維持,彼此都加油吧。

    回覆刪除
  5. Very useful blog, find out I have many things need to lear... Thx!

    回覆刪除
  6. 你的文章及攝影很棒,很高興你能分享自己的部落格,中英對照我是第一次看到,謝謝。

    回覆刪除
  7. 您好,請問一下,要如何將頭像與留言文字分兩區呢?
    我的blogger留言圖像是用同一張圖片的,(而圖片在ie6會亂掉,也能是我加的語法錯了吧..)
    它現在乍看之下有分兩區是因為我硬加像素進去,
    所以在不同的瀏覽器可能都會長不一樣...會亂掉...
    要如何使它平整呢?左邊是圖像,右邊的姓名是跟文字齊頭的呢?謝謝!
    老是那麼多問題打擾您真是不好意思...

    回覆刪除
  8. 你把#comments-block .comment-author {
    margin-top: 0em;
    }
    #comments-block .comment-body {
    margin-top: 0em;
    裡面的
    margin-top: 0em;都去掉看看,另外沒有0em;的用法,直接0;即可。
    在IE會這樣,我想是因為你的
    #comments-block .comment-footer {
    text-align: right;
    設定在右邊,後來的語法沒有調整回左邊,或是在html清除,才會造成的。
    或許在
    你把#comments-block .comment-author {
    加上
    text-align: left;
    讓他置左可能有用,你再試看看。

    回覆刪除
  9. 謝謝您的回應,不過我沒有成功耶,還是沒辦法讓留言者的姓名與留言內容齊頭,讓圖片歸圖片...
    是否因為我的圖示語法是加在這裡的原因呢↓
    <b:loop values='data:post.comments' var='comment'>
    <img src='http://lh3.ggpht.com/_xQLB03DLnm0/SulJx166LRI/AAAAAAAAARQ/tK4hSoFxREA/say.gif' style='border: 0px none ; vertical-align: bottom;'/>

    回覆刪除
  10. 你如果要這樣做,那就找到
    </dd><div style='clear: both;'/>
    </b:loop>
    你的語法下面,加上粗體的清除格式的語法,<div style='clear: both;'/>

    回覆刪除
  11. 對了從原始碼那裡我只能看到Css語法,html語法是看不到的,我是用Minima的模板去測的,因為你應該是套用這個的。

    回覆刪除
  12. 謝謝您啦~我放棄了^^"
    好像在設定裡的意見將"在評論上顯示簡介圖片?"選擇"是"之後,就自然會變成齊頭的,可是我不想要顯示簡介圖片~又不知道該如何將那個簡介圖片改成我要的圖的網址~~所以我放棄啦~~
    謝謝您的熱心幫忙~^^

    回覆刪除
  13. 在資訊主頁,按下"修改您的簡介",把照片換成你的即可了,這樣適合任何模板。

    回覆刪除
  14. 不是啦~我不是要換我自己的顯示圖~是要把所有留言者前的圖像變成我設定的同一個圖示~不過還是謝謝啦~

    回覆刪除
  15. 沒關係,以後有問題再問吧。

    回覆刪除
  16. 綸太郎,

    我又來問問題了..(汗!)

    我的留言編號好像怪怪的呢~

    我開了一篇測試一下...
    http://kay8078.blogspot.com/2010/07/blog-post.html

    發現如果用火狐開.留言編號就會出現.

    但是如果用IE開.留言編號就不見了...@@

    回覆刪除
  17. 你要不要再重新安裝看看,我試了在兩種瀏覽器都正常,用我的數值,可能你有步驟錯了,或是有改變邊欄寬度,padding 或是margin的設定,蓋掉數字。

    回覆刪除
  18. 恩~我是想改變那個作者回應的背景...

    原來那個地方會擠到編號阿??

    那我再來改改看...@@

    回覆刪除
  19. 恩~我剛剛有把作者留言的部分改成綸大你提供的一樣.

    但是他好像還是一樣呢~

    我另外又開了一個BLOG測試~
    http://jun2009005.blogspot.com/2010/07/wefdhwioeje.html#comments

    發現他好像還是只能在火狐顯示的樣子呢~那就沒辦法了~@@

    回覆刪除
  20. 我有"將迷你組件範本回復為預設值",應該是最近的後台有變更過,所以這方法又不行了,也發現多了很多原本沒有的語法,應該是這樣影響到的。

    回覆刪除
  21. 如果採用http://01mistery.blogspot.com/2009/02/comment-number.html的方式,留言在IE會正常出現,但是大頭會不見,有空再來研究看看,能否兩全其美的方式。

    回覆刪除
  22. 原來如此!!謝謝綸太郎的幫忙!!

    綸太郎的網站真的幫了我很大的忙呢!!

    都不用再出去GOOGLE就可以學到不少東西了!!^0^

    回覆刪除
  23. 我也一樣說~用火狐能看到編號,但IE不行~但也只能暫時別管它了
    想請教一下版大
    要如何更改才能讓自己的回應有區塊顏色,像您的這樣一樣呢?

    回覆刪除
  24. 我也有像KAY一樣的情況+1
    火狐可以看到編號,但IE不行,也暫時不管它囉
    但我想請教一下版大,如何讓自己回應的區塊和訪客的用顏色區別像您的這樣呢?

    回覆刪除
  25. 可參考這篇作法
    http://01mistery.blogspot.com/2009/03/auther-comments.html

    回覆刪除
  26. 謝謝綸太郎
    你的網站幫了我很多忙
    可以再請教一下
    剛剛我發現我要從xuite把影音程式碼外連到blogger的網誌文章中當背景音樂使用時,都不能正常播放。
    我參考了這篇文章 http://forum.xuite.net/_event/discuz/1689/35914
    全部照做了仍舊不行
    和發問者一樣的問題一樣,按下play後會時間變00:00 音樂名稱變為 NaN:NaN
    您知道要如何解決嗎
    還是您建議有什麼空間可以外連音樂也很方便的@@"

    回覆刪除
  27. 你只要在最後的語法部份</object>前面插入</embed>即可。

    回覆刪除
  28. 我試過了還是不行~

    是引號'要改成"的關係,還是我得再去掉XUITE給的一長串語法中的哪部份?
    因為我都試過了 仍然不能play >"<
    還請綸太郎指導一下 麻煩你了

    回覆刪除
  29. 我沒有改任何語法,就使用xuite給的程式碼,然後加上我說的那部份而已,播放很正常。

    回覆刪除
  30. 今天我用不同台電腦且用火狐試,果然可以。難道用IE不行?我下班後會試看看,謝謝你^^

    回覆刪除
  31. 你好,

    照著你這篇的方法

    一模一樣

    可是並沒有出現...大頭貼跟...回應編號

    我該如何是好

    翻前面那篇舊文章嗎 ?

    另外我也試著"""
    將迷你組件範本回復為預設值"""

    然後...
    我也查不到
    dl id='comments-block'
    這段...意思是我無法用回應編號這功能嗎 ><

    回覆刪除

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