[Update] - Modify Form comment : Bài 13 - Thiết kế lại giao diện của comment

Thủ thuật này mình thực hiện theo yêu cầu của bạn Yolks.
Đây là thủ thuật thứ 13 về comment cho blogspot. Thủ thuật này sẽ giúp các bạn tạo mới lại giao diện cho khu vực hiển thị comment của blogspot.
Một lưu ý nhỏ khi thực hiện thủ thuật : do thủ thuật can thiệp khá nhiều vào code của template, nên tránh gặp sự cố đáng tiếc, các bạn nên download template của blog về máy trước khi thực hiện thủ thuật.

Sau đây là 1 số hình mình họa cho thủ thuật:

Hình minh họa cho yêu cầu

Hình mình đã test trên blog

A. Đầu tiên đê thực hiện thủ thuật, bạn phải thay đổi 1 số cài đặt như bên dưới
- Vào phần cài đặt
- Chọn mục nhận xét
- Kéo xuống dưới phần "Định dấu thời gian của các nhận xét" và chọn như hình bên dưới

- Lưu lại giá trị cài đặt.

B. Sau đây là các bước thực hiện thủ thuật:

1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Tìm đến đoạn code CSS như bên dưới :

#comments dl dt {
...
...
}

5. Thay thế và thêm mới bằng đoạn code CSS bên dưới:

#comments dl dt {
font-weight: bold;
margin-top: 0;
padding-left: 4px;
}
#comments dl dt span.cmlink {font-weight:normal!important;}
#comments dl dt p
{font-size:85%;font-weight:normal!important;padding: 0; margin: 0;}

/* Modify Comment layout */

#comments-block.avatar-comment-indent {margin-left:0px!important;}
.comment-items {
background:#efefef;
border:1px solid #c3c3c3;
margin-bottom:5px;
padding:5px;
}
.comment-items-info {padding-left: 45px;}
.avatar-image-container {
position:none!important;
left:12px!important;
}
.comment-items-body {
margin-top: 20px;
position: relative;
background: white;
border: 1px solid #C3C3C3;
padding:3px 7px;
}
.comment-items-body .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle.gif);
}

.avatar-image-container img{width:40px;height:40px;padding:1px;}

/* END Modify Comment Layout */

- Chú ý : nếu blog của bạn nào ko có đoạn code ở bước 4 thì vẫn thêm đoạn code ở bước 5 như bình thường, vị trí thêm bạn có thể đặt nó trước đoạn code bên dưới :

.deleted-comment {
font-style:italic;
color:gray;
}

6. Tiếp tục tìm trong code template đoạn code như bên dưới :

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
...
...
...
</dt>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
...
...
...
</dd>

<dd class='comment-footer'>
...
...
...
</dd>

</b:loop>
</dl>

</div>

7. Thay tất cả chúng bằng code bên dưới :

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

<div class='comment-items'>

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

<div class='comment-items-info'>

<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<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>
<span class='cmlink'>
( <a expr:href='data:comment.url' title='comment permalink'> <img src='http://data.fandung.com/img/fd-link-icon.png'/> </a><b:include data='comment' name='commentDeleteIcon'/> )
</span>
<p><data:comment.timestamp/></p>
</dt>

</div> <!-- END comment-items-info -->

<div class='comment-items-body'>
<span class='triangle'/>
<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>

</div> <!-- END DIV comment-items -->

</b:loop>
</dl>

</div>

8. Save Template.

Update : Tạo ảnh nền riêng biệt cho comment của ADMIN

Hình ảnh minh họa:

Để update, các bạn thực hiện các bước như bên dưới:
1. Thêm code CSS vào code ở bước 5:

.comment-items-body-admin{
margin-top: 20px;
position: relative;
padding:3px 7px;
background: #d3f0f8;
border: 1px solid #98ccda!important;
}

.comment-items-body-admin .triangle {
width: 19px;
height: 18px;
display: block;
position: absolute;
left: 50px;
top: -18px;
background: url(http://data.fandung.com/img/fd-cm_triangle-admin.gif);
}

2. Tìm code như bên dưới ở bước 7:

<div class='comment-items-body'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>

</div>

3. Thay nó bằng code bên dưới:

<b:if cond='data:comment.authorUrl == "http://www.blogger.com/profile/04749296400753058357"'>
<div class='comment-items-body-admin'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

<b:else/>

<div class='comment-items-body'>
<span class='triangle'/>

<dd expr:class='"comment-body " + data:comment.commentAuthorClass' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
</b:if>
</dd>
</div>

</b:if>

- Ở code này, ta sẽ thấy 1 dãy số 04749296400753058357 , đây là số ID Profile của các bạn, thay nó bằng mã ID của bạn.

4. Save template.

Chúc các bạn thành công.