v 回應編號與留言者大頭無法並存解決之道 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

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搜尋功能

Related Posts Plugin for WordPress, Blogger...