"Thủ thuật tạo khung comment trông đẹp hơn"

Hôm nay mình sẽ hướng dẫn các bạn cách tạo nên một Forum comment trông đẹp mắt với những thủ thuật cũng không quá phức tạp. Thủ thuật sẽ làm cho phần comment của bạn có hiển thị ảnh avatar, tên người để lại comment và ngày tháng trên cùng một hàng và phần nội dung sẽ hiển thị bên dưới. Tùy theo mỗi template của các blogger mà bạn sẽ chỉnh sửa cho phù hợp. Để phòng ngừa khi bị trục trặc trong việc chỉnh sửa bạn nên save toàn bộ HTML cũ của blog trước khi thực hiện.

Sau đây là các bước thực hiện:
1. Đăng nhập vào blog
2. Vào Layout
3. Vào Edit HTML (Chỉnh sửa HTML)
4. Chọn Expand Template Widget (Mở rộng mẫu tiện ích)
5. Tìm đến code sau

#comments {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 6px;
background: #ddd ;
border: 2px solid #FFF;
}

6. Chèn thêm code bên dưới vào sau code vừa tìm được

.comment-author {
font-weight:bold;
font-size: 14px;
color:rgb(0, 0, 153);}

.comment-author:hover {color:#ff0000;}
.comment-author:visited {color:rgb(0, 51, 0);}

.comment-timestamp {
margin:0px 0px 0px 0px;
font-size: 13px;
padding: 0px 0px 0px 0px;
color:#ff0000;}

.comment-timestamp:hover {color:rgb(0, 0, 153);}

.commenttext {
border-left:1px solid #c0c0c0;
border-right:1px solid #c0c0c0;
border-top:1px solid #c0c0c0;
border-bottom:1px solid #c0c0c0;
color:#000000;
font-family:vardana;
margin: -20px 5px 10px 44px;
padding:0px 3px 0px 5px;
width:470px;
line-height:1.3em;
background: #dddddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPRaToeZOJE0Yj29KbV-_Z-EJ6Q1YczK2YCGEn2EQ-5of6QiOafi4BJ0u6JocX3uZs413OzxsrMS2nWV2IafDSTxXOJq995HGjSDYu42dFt-IptKI7Lou6Jrkt2wgPf5vyY2twQFBjUFG/) no-repeat;
}


.avatar-image-container {
background:url(http://farm3.static.flickr.com/2493/3936605180_5f80a4d847_o.gif) ;
float:left;
margin: 0px 2px -45px 0px;
padding:1px 1px 1px 1px;
border: 1px solid #9999ff;
width:35px;
height:35px;
}
.avatar-image-container img {align:middle; border:;}

Bạn có thể dựa vào các code trên để chỉnh sửa màu sắc chữ hay màu nền của phần comment.
7. Tiếp theo bạn hãy tìm đến code sau

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1<data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

8. Thay thế toàn bộ code trên thành code bên dưới

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<b:if cond='data:post.allowComments'>

<div id='bg_commentblock'>

<div id='commentblock'><!--commentblock-->

<b:if cond='data:post.numComments == 1'>1
<b:else/>
<strong><data:post.numComments/> <data:commentLabelPlural/> to" <data:post.title/> "</strong></b:if>

<dl class='commentlist'>

<b:loop values='data:post.comments' var='comment'>
<span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='25px' style='margin-bottom:-2px;' width='25px'/>
</b:if>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

</dt><dd class='comment-footer' style='display:inline; '>



</dd></span>
<div class='commenttext'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>

<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><span class='comment-author'><data:comment.author/></span></a>
<b:else/><data:comment.author/>
</b:if>
<span class='comment-p'><data:commentPostedByMsg/> on </span>
<a expr:href='data:comment.url' title='comment permalink'><span class='comment-timestamp'>
<data:comment.timestamp/></span>
</a><b:include data='comment' name='commentDeleteIcon'/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:loop>
</dl>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>
</div><!--end commentblock-->

</div>
</b:if>

9. Cuối cùng save template lại