[Update] - Modify Form comment : Bài 13 - Thiết kế lại giao diện của comment
Thứ Sáu, 10 tháng 6, 2011
Đâ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
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 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 */
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 :font-style:italic;
color:gray;
}
<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 :<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>
<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.<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>
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: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);
}
<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:<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.<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>
4. Save template.
Chúc các bạn thành công.
Comments[ 0 ]
Đăng nhận xét