2009年3月4日 星期三

加強blogger作者留言和一般留言的區分


在Blogger裡如何突顯作者留言回覆(或稱版主回覆)與一般讀者留言的區塊的不同,通常我們是透過CSS的語法,強調文字顏色的不同來區別,以前綸太郎在使用的Blogger Hacks資源網站這一篇文章有提到,是參考高特色他---亮显示作者评论与评论通知的作法(連結已失效),只是這個做法,我常常將程式碼加錯地方,要修正好多次才能正確展示,最近看到一篇文章,衍生了以下的作法。

展示成果如下圖, 作者部分用藍色區塊顯示,


參考來源:How to Style and Highlight Author Comments

照這個方法,最初顯示的圖片如下,經過我的修正才有上面的格式出現。


因為覺得他的語法,是在Html的結構裡,套用Css外觀語法,這應該不是正常的模板規則,記得綸太郎在Blogger template模板教學課程---概說及基本結構曾提到,模板的構成是由css外觀+html結構與內容,所以我把他提供的Hacks做了一些更改,就是把這兩者分開,當然你要直接套用他的語法自己再做些修正也是可以的。

記得先備份原始模板
進入blogger後台→版面配置→修改HTML,勾選展開小裝置範本
找到
<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>

P.S.如果你找不到上面這個區塊來修改,可能是你套用的模板已經修正很多地方了,這在官方的模板是可以套用的,因為我的另一個網站,套用此法是不行的。

然後以下列程式碼置換
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<b:if cond='data:comment.author == data:post.author'>
<p>
<div class='comment-me'>
<data:comment.body/>
</div>
</p>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</b:if>
</dd>

我修改了紅色的部份,他原先的是採取直接在html內容結構裡加上css外觀語法, 原始語法是
<div style='color:#FFFFFF; background-color:#555555;padding:5px;'>
而我以
<div class='comment-me'>
取代,然後在上面CSS外觀定義處,多了一項 .comment-me這個定義,你可以把它放在comment區塊中,這名稱你可以自己命名,用comment-author亦可,只是我怕會和其他模版原有的定義相衝突,所以取名為comment-me,而這呈現的外觀格式,顏色、字體、行距,甚至可以加上背景與邊框,當然你要加上背景圖片亦可,都可以自己設計的,而且可隨時變更樣式。

以下我是針對我的樣板,設計的.comment-me的語法,你可以自己修改,因為我的留言有編號,所以和右邊的距離一定要遠一些,所以設計margin-right: 35px;
.comment-me {
margin-right: 35px;
margin-bottom: 5px;
color: #666666;
font-size: 8pt;
line-height: 1.5em;
background-color: #E0ECFF;
border: 1px dotted #C0C0C0;
padding:5px;
}


2012.2.26更新
這個.comment-me { 定義,請跟你的相關的comment區域的定義放在一起,有朋友放在css最前面,在IE可正常顯示,其他瀏覽器則無法作用,修正過後即可正常顯示。

這樣一來外觀歸外觀(css),內容結構歸內容結構(html),感覺就會比較符合我的要求了。

另外Abin's Tech Note也有寫類似的文章---作者和一般回應的標示區別 (Author comment highlighting) ,但是他是連作者名稱這部分都有變更,而我介紹的這個Hacks主要是針對作者回應的內容格式做區隔,這兩個Hacks是不太相同的,如果有需要的也可以參照他的作法。

題外話: 最近如果你的留言系統,是採嵌入式留言的,在IE6底下無法張貼意見的,可以改成彈出視窗或是開新頁的模式,這是我最近發現的Bug,已經好多天了,Google還沒修正,不過Firefox是沒有問題的,至於IE7我沒有測試。

2009.10.18 更新
Blogger Highlight author comments , 作者回應上色 for Blogger
目前發現這個方式最簡單使用。

58 則留言:

  1. 再次感謝綸太郎...
    這讓我版面更易閱讀了!!
    大推!!

    回覆刪除
  2. 你的留言也不少,看起來很不錯,我也是有需要才想到找方法解決,分享給大家。

    回覆刪除
  3. 請問共用網誌作者是不是就不會有這個效果呢?
    我已經忘記我用誰的方式來改了~ :P
    不知道綸太郎的方式共用網誌作者也會出現作者的底色嗎?

    回覆刪除
  4. 我沒有共用網誌,你可以試看看,我想應該是每個作者都會出現吧。

    回覆刪除
  5. 綸太郎你好,
    我試著用你的方法去更改了程式碼,
    但是舊有的作者回應並沒有改變..

    請問這是從更改的那一刻起才套用在新的作者回覆上嗎?

    謝謝你!
    常來看你的文章,你的文章讓我的blog受益良多!

    回覆刪除
  6. 我現在看很正常,應該是問題解決了吧。

    回覆刪除
  7. 我剛剛再檢查一次,他只對我後來改的顯示名稱"大頭妹"有反應,至於之前登入帳號的顯示名稱"shiringe"則沒有...

    原來這個只針對"顯示名稱" 有反應,如果我沒有登入,在名稱/網址部分打大頭妹,應該一樣是會有版主回應的反藍色區塊哦!?

    Anyway,目前看來應該是沒有問題的,謝謝你提供這個好方法!!

    回覆刪除
  8. 當然以你部落格的顯示名稱為依據,至於登入的名稱我想很多人都不想讓人知道吧,因為登入的帳號就是你的Gmail。

    回覆刪除
  9. 呃...所以找不到那段code就不能用這個方法嗎=_=??

    回覆刪除
  10. 我是沒辦法,但還是可以利用Abin's的方法達成這種效果。

    回覆刪除
  11. 我想問一下
    .comment-me {
    margin-right: 35px;
    margin-bottom: 5px;
    xxxx省略

    這塊要放在CSS的哪裡呢?
    謝謝

    回覆刪除
  12. 找到有comment語法相關的css區塊即可,譬如#comments h4 { }
    這下方就可以了,因為你沒有留網址,沒法幫你看,每個模版定義都不太一樣。

    回覆刪除
  13. 有成功改好了,這樣看起來比較容易辨識.謝謝

    回覆刪除
  14. 这个好~ 谢谢你哦 ~ 我估计还能实现更加美的效果

    回覆刪除
  15. 我的部落格尚在建構階段~
    在你這邊學到很多很多很多~~~~
    謝謝~^^

    我也有一段"題外話~
    「題外話: 最近如果你的留言系統,是採嵌入式留言的,在IE6底下無法張貼意見的,可以改成彈出視窗或是開新頁的模式」~

    這段題外話解決了了我的困惑~~^^

    回覆刪除
  16. 你好,你幫我的部落格改名了,方便的話改一下"0與1謎詭世界",不是"詭譎",謝謝你的肯定歐。

    回覆刪除
  17. 如何在回應之間

    加入分隔線阿..

    不然我的看起來好擠好亂喔..

    回覆刪除
  18. 回應與回應間加上分隔線
    你可以在
    #comments-block {
    加上
    border-bottom: 1px dotted #666666;
    如果是本文與回應間,則在
    #comments h4 {
    或是.post-footer {
    裡面加上分隔線的敘述即可。
    你可以參考
    http://01mistery.blogspot.com/2008/09/bloggercss_27.html
    這篇找到相關位置自己加語法。

    回覆刪除
  19. 謝謝!
    我加上去了..

    只是跟本文相連的分隔線
    出現在奇怪的位置上!
    不知道怎麼升高他

    而comments-block地方
    發生了只有我回應會出現分隔線
    其他人回應沒有的情形..

    http://lonyice.blogspot.com/2008/09/blog-post_29.html#comments

    麻煩你幫我看看了..
    我不知道要加在哪裡比較妥當

    回覆刪除
  20. #comments h4 {這個border取消
    找到
    #comments-block .comment-footer {
    加上
    border-bottom: 1px dashed #666666;
    因為每個人的模板都不太一樣,其實如果你每個都給他加加看,也是可以測出來的。

    回覆刪除
  21. 感謝
    我找到了~~

    後來我在
    #comments-block .comment-body {
    裡加入了
    跟.comment-me 類似的語法
    想讓其他人留言也在方框裡看起來比較整齊

    卻在我的留言出現了兩個顏色方塊擠在一起
    我刪刪減減..

    還是試不出把兩個顏色分開的方法..

    救我.. Orz

    回覆刪除
  22. #comments-block .comment-body {是整個留言文字區,不分作者或讀者都共同使用的,如果你要這樣做,那連Html的語法都要改變了,應該不是只有改css語法而已吧,你可以參考Skyvee的作法
    http://skyvee.net/2007/10/blogger-comment.html

    回覆刪除
  23. 太好囉!
    成功了~

    把兩位大大的知識結合在一起
    把它改好了>"<

    不過..

    我不知道改到哪個語法
    「意見:」 這文字跟回應區塊變的有點擠..

    囧rz

    回覆刪除
  24. 把#comments h4 {裡的
    margin-bottom:-15px;拿掉或是改成0

    至於要和標題同步,這個我不會,語法裡的說明是給機器人看的,外觀設定是給人看的,是不一樣的意思。

    javascript語法我不會,沒法幫你解答。

    回覆刪除
  25. 大大你好,我造你的方法去用了,可是我的留言還是都沒有改變呢!!我剛開始使用Blogger ,不懂語法,是因為CSS的部份放錯嗎??可以幫我看一下嗎??

    我的網址:http://dungfang.blogspot.com/

    回覆刪除
  26. 你可以把.comment-me {
    放到/*COMMENTS*/這區
    還有我從原始碼那裡看不出html的配置,不過你的意見css跟別人不一樣
    大概是下列長這樣
    #comments-block .comment-body {

    所以是不是將css改成
    #comments-block .comment-me {
    可以測試看看
    前面多加個#comments-block

    如果不行 可以原作者提供的他方式

    回覆刪除
  27. 發表意見的人名前面有小圖示
    那是怎麼做的?
    還是去哪裡設定 ?

    回覆刪除
  28. To Faxio,每個模版提供的不太一樣,有的有,有的沒有。

    回覆刪除
  29. 點進文章的"意見",發表人名稱前面有橘色B字小圖像,但是點進文章標題的就沒有 !
    而你的模板是全部都有
    若是模板不同,也是可以自己加不是嗎?
    綸大應該是沒改過這部分吧
    看看你的原始模板語法應該
    可以得到啟發

    回覆刪除
  30. 馬上下載Freshy 模板來看
    在 comment-block 這部分
    確實有加一個style
    在模版內找不到這個class
    我想應該是系統的,
    加進這個語法 發表人名稱之前就有一個橘色小B圖示

    回覆刪除
  31. 您好
    想區隔作者與訪客
    參考您的做法
    前半段已經有找到
    可是後半段的comment區塊
    我從我修改HTML中一直找不到
    不知您是否方便幫忙看一下
    感謝~

    回覆刪除
  32. 你是說.comment-me這個嗎,這是自己加上去的,當然找不到,把這語法加到</head>之前即可。

    如果不是說這個,我另一個網站也是找不到相關程式碼,所以目前是用這個方式,Blogger Highlight author comments , 作者回應上色 for Blogger

    回覆刪除
  33. 非常感謝您的回覆~
    很抱歉可能是我沒有寫清楚...
    因為我的程式碼裡,我找不到我原本有關COMMENT外觀定義的區塊,因此不知道要將您提供的語法(COMMENT-ME)複製到哪裡,而第一步驟的部分已經照您提供的方式變更了,那麼是否表示我要用別的方式來修改?
    感謝!

    回覆刪除
  34. 你就加在#footer-wrapper .links {
    margin:0pt 14px 8px;
    }
    後面也可以,只要在</head>之前即可,不用太在意有沒有找到外觀定義的區塊,只是把語法放上去即可,我看了你的原始模板,這個方式應該可以成功,如果沒有成功,就用我建議的那個就可以了。

    回覆刪除
  35. 感謝您提供的方法已經成功了
    不過想再請教您一個問題
    您有提到不用太在意有沒有找到外觀定義的區塊
    因為我覺得我的文章下方訪客留言的字體太小,而且整個區塊都太左邊,那麼是否表示我要自己加一段語法才能修改呢?
    雖然我的留言很少,但還是希望能讓版面看起來好看一點,從您這裡的教學學到很多,謝謝!!

    回覆刪除
  36. 是啊,你可能要參考官方模板,把定義自己再加進去,如果覺得有些困難,或許選擇一個更適合自己的模板會比較快些。

    回覆刪除
  37. 如果真要改,可能先加上
    .comments-block{
    margin-left:10px;
    font-size: 9pt;
    }
    看看會不會好些,再慢慢加上細目來調整。

    回覆刪除
  38. Dear 綸太郎您好:

    感謝您的教學,
    我之前找了很多網路上的方法,都不成功,
    後來用此篇文章中的方法,是有成功的~
    (就是在有人頭標記的狀況下,作者回覆有變色,還可以指定回應區塊顏色…
    網路上部分的方法,在「有人頭標記」的情況下,是不work的…)

    不過後來仔細一看,
    好像只有在IE(我是用IE7)下可以work,
    在我平常用的Chrome(4.0),還是都沒變耶…
    有什麼方法可以讓Chrome也顯示變色嗎?

    對了,在這裡留下我的Blog,http://hans543.com
    再麻煩您如果有空的話,幫忙看一下喔^^
    感激不盡!!

    回覆刪除
  39. 我是樓上的翰仔,
    補充一下,

    但是您的Blog回覆,我在Chrome看起來,
    是有變色的(藍色底色)

    所以,是我的設定哪裡有問題嗎?

    回覆刪除
  40. 你把.comment-me { 改成
    #comments-block .comment-me {
    看看,試看可否成功,因為你的意見區塊跟一般定義不同。

    回覆刪除
  41. 謝謝綸太郎,您的回覆好快^^

    不過我用了您的方法,Chrome還是不行捏…
    唉~

    還是非常感謝您喔^^

    回覆刪除
  42. 很奇怪我也是套用Minima黑色模板,一套就成功,或許你該移動.comment-me {這段語法到
    .deleted-comment {
    font-style:italic;
    color:gray;
    }
    後面來,不要放在最前面,讓他和#comments-block這區在一起看看。

    回覆刪除
  43. 謝謝您的回覆~

    剛剛再用您提到的方法試了一下,
    真的可以了耶!!!!
    (不過要把您之前提到的,#comments-block .comment-me { 前的#comments-block拿掉,再接到您後來提到的地方後頭,就可以了!!)

    綸.太.郎.好~~棒~~~啊)))))))))))
    (雙手高舉慢速奔跑)

    謝謝您,
    我會再側邊再加上推薦連結區,
    一定會加上您的Blog的,
    再次感謝熱心的綸太郎^_________^

    回覆刪除
  44. 不好意思,再請問一下~
    如果想增進這方面的功力,
    是要看哪方面的書?

    是CSS的書嗎?
    還是…其他的語言?

    回覆刪除
  45. 謝謝你的推薦,也證明語法位置要放對,Hacks才會發生效果,看Css的書有助於版面的設計,看Html(XHTML)則幫助你了解語法的結構,我自己剛開始是買"無廢話XHtml&CSS"這本書,應該現在有更新的書了

    回覆刪除
  46. 謝謝您的回覆^^
    (那本書…都賣完了說…Orz)

    仔細看了您的blog才發現…
    覺得您的大名很眼熟…

    原來…

    在您的東京封印,我就留過言啦XD
    (之前我也寫了日本行的報導,有空歡迎您的參觀我的2009大阪秋之旅報導喔^^ hans543.com/2009/10/2009.html)

    我已將新增推薦連結區塊在我的Blog首頁右側,並將您的網站加入,謝謝您的熱心協助^^

    回覆刪除
  47. 我知道,你的攝影作品都很棒,照片編修方式我很喜歡。

    回覆刪除
  48. 你好有個問題想請問一下
    我的留言區塊
    訪客姓名下方就是留言時間
    請問那邊要怎麼改成像你的一樣
    顯示在右邊
    而且你的發文時間還有超連結
    我的沒有

    謝謝^^

    回覆刪除
  49. 我沒有修改,這是這個模版原本的設計。

    回覆刪除
  50. 您好。我加上去了,好像也不能正常顯示耶?
    語法真的讓人傷腦筋呢...@@

    回覆刪除
  51. 文章裡還有提到其他2種方式,你也可以試看看。

    回覆刪除
  52. 來請教, 不知為何我加入這個功能後, 我回應的大頭照卻顯示不出來, 試著重新上傳我的照片也一樣無效! 求救~

    回覆刪除
  53. 綸太郎, 我發現是之前作者回應的不會顯示大頭照, 新回的才會有! 但為什麼會這樣呢? 可以讓他都顯示嗎?

    回覆刪除
  54. 大頭照的功能本來就有點不正常,先前的留言我聽說有種說法是,你換過大頭的個人圖案,就無法顯示先前的大頭,以我的部落格而言,有的有有的沒,我已經習慣了,我也沒有解決方式。

    回覆刪除
  55. 綸太郎前輩你好,能不能幫我看看我的網誌,我找不到你說的語法。
    不知道要用什麼方式才能讓我的留言者有頭像。

    回覆刪除

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