為 blogger 留言區(comment) 加個對話框吧!

推文分享

留言區, 如果能夠把作者及讀者留言區塊以不同格式呈現, 也能讓板面看起來生動些.

怎麼做呢? 其實就是加個背景圖, 背景色, 調一下區塊格式.





之前介紹過在留言區加大頭照的功能後, 也有朋友問起對話框的格式, 所以整理一下, 再配張對照圖, 讓有興趣的朋友參考看看.

1.先下載圖片, 然後上傳到網頁空間, 取得這兩張圖片的網址.

箭號圖片 下載網址

留言區背景圖片 下載網址

2. 然後找到 comment-body 這塊 CSS 區段, 或是相似名稱, 有些template 可能不完全一樣.

我的留言區的程式碼, 是長這樣的, 有興趣的人可以參考, 或再自行修改囉!


.comment-author {
margin: 0px 0px 0px 0px;
padding: 0 10px 0 40px;
color: #777;
font-size: 16px;
font-weight: bold;
background: url(箭號圖片網址) no-repeat 20px 7px;
}

.comment-body {
background: url(留言區背景圖片網址) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body p {
background:#d0d0d0;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}

.comment-body-author {
background: url(留言區背景圖片網址) no-repeat 35px 0px;
padding-top:1px;
}

.comment-body-author p {
background:#ccdacc;
margin: 5px 0 0px 0;
border: 6px solid #e5e5e5;
line-height: 1.6em;
padding: 7px 7px 7px 13px;
}


用這張圖片來說明, 每塊程式碼名稱如 xxxxx｛程式碼 ｝, 用圖對照, 如果想修改, 應該方便多了.


2008/04/11 更新 : 如果想讓訪客與作者有顏色區分效果, 可參考079 提供的程式碼.

謝謝cocomac的提醒.^^

步驟如下,

打勾小裝置, 在<dt class='comment-author' .....>　XXXXXX </dt>之後, 加入以下程式碼.
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd> <b:else/>
<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>
</b:if>

創用 CC 授權

本創作適用 姓名標示-相同方式分享 2.5 創用 CC 授權，台灣 並依循所適用的授權條款。

相關文章 :