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ục2. Vào
chỉnh sửa code HTML3. Chọn
mở rộng mẫu tiện ích4. 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>
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>
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>
<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.
