加強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
目前發現這個方式最簡單使用。

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