THIẾT KẾ GIAO DIỆN CỦA MỤC NHẬN XÉT (COMMENTS)

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.

XEM NGUỒN BÀI VIẾT