v 加強blogger作者留言和一般留言的區分 >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


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

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

Related Posts Plugin for WordPress, Blogger...