Thủ thuật: Form comment đẹp cho Blogspot
Nguồn: Sưu tầm



Giới thiệu: Như đã biết, form comment mặc định của Blogspot rất đơn điệu và không có nhiều tùy chỉnh. Do vậy, thủ thuật sau sẽ giúp bạn làm đẹp thêm cho form comment của mình. Đặc biệt hữu ích với các blogger thích trang trí cho khung comment của blog thêm phần bắt mắt.

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

<!--Form comment đẹp cho blog (1)-->
<div class='clear'/>
<div class='comments-block'> 
<b:loop values='data:post.comments' var='comment'>
<div class='comments-avatar'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='arrow'/>
<div id='comments-box'>
<a class='comments-reply' expr:href='&quot;https://www.blogger.com/comment.g?blogID=5950416464056762250&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%20%3A#form&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=450&quot;);return false;' rel='nofollow'> Trả lời </a>
<div class='comments-meta'>
<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/>
<div class='comments-timestamp'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div></div>
<div class='comments-body'> 
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if></div>
</div>
<div class='clear'/>
</b:loop>
</div>

<img src"LINK_HÌNH_REPlY"/>

#comments-block {...}
.comment-body {...}
.comment-footer {...}
.comment-author {...}
.comment-body p {...}
.deleted-comment {...}
......

Chủ yếu là xóa #comments-block và các phần tử nằm trong nó.


Bước 4: Sau khi xóa hết các đoạn code trên. Hãy thay thế bằng 1 trong 4 loại đoạn code CSS sau:

Loại 1:

/*Comments đẹp cho blog (2)
*******************************/
.comments-block a,.comments-block p,.comments-block a img{
margin:0;
padding:0;
outline:none;
border:none;
}

/*Khung comment chính, chứa các class bên dưới*/
.comments-block{
width:495px;  
background: #FFF; /*Không dùng màu nền thì bỏ dòng này*/
padding:10px 0px 0px 0px;
font-family: Tahoma;
line-height:17px 
}

/*Khung comment. Chứa nội dung, tên người comment, ngày đăng, Reply*/
#comments-box{ 
float: left;
width: 490px; 
margin:0px 0px 14px 0px;
border-bottom:2px solid #e3e3e3;
}

/*Avatar comment*/
.comments-avatar{
float: left;
padding:2px;
border: 1px solid #ccc; 
}

/*Khung chứa tên người comment, ngày đăng comment*/
.comments-meta{
padding:19px 5px 3px 7px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI-nXKMjGFJAEeAlrhcPmSNq0VFNPwgnkNjzis6LgclpeK4yOVBgxazADRxQp4EGjW9S7eLt__RmPXjhrMojvaZVA-VP9vUxll2PYzR0QltgyPQYpKKV2uS51CChVc1CktNreJyAZ6NNd/); 
border-bottom:1px solid #E3E3E3;
}

/*Chữ “nói” sau mỗi tên comment*/
.comments-meta{
font-size:12px; 
color: #6D6F6D;
}

/*Tên người đăng comment*/
.comments-meta a{ 
font-size:12px;
font-family: Verdana;
text-decoration:none;
}

/*Ngày, giờ đăng comment*/
.comments-timestamp{
color:#0E6284;
font-size:10px;
font-family: Arial;
}

/*Khung chứa nội dung comment, không chứa tên người và ngày đăng comment*/
.comments-body{
font-size:12px; 
color: #000;
background:#FCFACE; /*Nền comment*/
padding:5px;
border-left:4px solid #e3e3e3;
border-right:2px solid #e3e3e3;
}

/*Nút Reply*/
a.comments-reply{
padding:28px 10px 10px 5px; /*Canh lề nút reply*/
display:block;
color:#0E6284;
float:right;
}

/*Định dạng size avatar comment*/
.avatar-image-container{
width:40px;
height:40px;
}

/*Avatar mặc định cho nặc danh*/
.avatar-image-container img{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8y79LWo3bFuY7RcspMfBvdbHbOd-upZVf_XlX7uYEXlkMV2-VIb-ZPL2pyjCvpKsQg6-68zLTSqgOutBAy7H5ZdTjWusDZbwpElABMoZ9rnToxQLSK0ySAEMCgv7XLNnKuZz79MHjjs/) no-repeat;
width:40px;
height:40px;
}

/*Định dạng bài viết bị xóa*/
.deleted-comment {
font-style:italic;
color:gray;
text-decoration:line-through;
}

Loại 2:

/*Comments đẹp cho blog (2)
*******************************/
.comments-block a,.comments-block p,.comments-block a img{
margin:0;
padding:0;
outline:none;
border:none;
}

/*Khung comment chính, chứa các class bên dưới*/
.comments-block{
width:495px;  
background: #FFF; /*Không dùng màu nền thì bỏ dòng này*/
padding:10px 0px 0px 0px;
font-family: Tahoma;
line-height:17px 
}

/*Hình mũi tên*/
.comments-block .arrow{ 
float: left;
margin: 45px 0px 0px -16px;
display:block;
width:16px;
height:8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCKpH7fvCknzkri2uLaFw1-BO2_9AEtLzg-MDVunWBr66qT_U4PHVmrE_GSp0wpjw1zX9fqIR5LHwZQ5D0Xs9HUzXrBJ9yZ9FuZfDHkwpYmenmw0kks8FZ1HTLQM4QNupCmAmy3CYmNoKL/) no-repeat; 
}

/*Khung hình comment. Chứa nội dung, tên người comment, ngày đăng, Reply*/
#comments-box{ 
float: left;
width: 490px;
margin:0px 0px 14px 0px;
border:3px solid #e3e3e3;
border-radius:8px 
}

/*Avatar comment*/
.comments-avatar{
float: left;
padding:2px;
border: 1px solid #ccc; 
}

/*Khung chứa tên người comment, ngày đăng comment*/
.comments-meta{
padding:5px;
background:#F1F1F1; 
border-bottom:1px solid #E3E3E3;
}

/*Chữ “nói” sau mỗi tên comment*/
.comments-meta{
font-size:12px; 
color: #6D6F6D;
}

/*Tên người đăng comment*/
.comments-meta a{ 
font-size:12px; 
font-family: Verdana;
text-decoration:none;
}

/*Ngày, giờ đăng comment*/
.comments-timestamp{
color:#0E6284; 
font-size:10px;
font-family: Arial;
}

/*Khung chứa nội dung comment, không chứa tên người và ngày đăng comment*/
.comments-body{
font-size:12px; 
color: #000;
background:#FCFACE; /*Nền comment*/
padding:5px;
}

/*Nút Reply*/
a.comments-reply{
padding:10px 5px 10px 5px; /*Canh lề nút reply*/
display:block;
color:#0E6284;
float:right;
}

/*Định dạng size avatar comment*/
.avatar-image-container{
width:40px;
height:40px;
}

/*Avatar mặc định cho nặc danh*/
.avatar-image-container img{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8y79LWo3bFuY7RcspMfBvdbHbOd-upZVf_XlX7uYEXlkMV2-VIb-ZPL2pyjCvpKsQg6-68zLTSqgOutBAy7H5ZdTjWusDZbwpElABMoZ9rnToxQLSK0ySAEMCgv7XLNnKuZz79MHjjs/) no-repeat;
width:40px;
height:40px;
}

/*Định dạng bài viết bị xóa*/
.deleted-comment {
font-style:italic;
color:gray;
text-decoration:line-through;
}

Loại 3:

/*Comments đẹp cho blog (2)
*******************************/
.comments-block a,.comments-block p,.comments-block a img{
margin:0;
padding:0;
outline:none;
border:none;
}

/*Khung comment chính, chứa các class bên dưới*/
.comments-block{
width:495px;  
background: #FFF; /*Không dùng màu nền thì bỏ dòng này*/
padding:4px 0px 0px 0px;
font-family: Tahoma;
line-height:17px 
}

/*Hình mũi tên*/
.comments-block .arrow{ 
float: left;
margin:26px 0 0 2px;
display:block;
width:8px;
height:16px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpcm2mxjMrM9LIIURqjfVbeiCm_omNs_0PhuLKUb8SAP7vwAyZqxv47iaSlKOMgV224jZOTfYdtjudp4Q7W42-CPL_D3wxGyGxm9D1q4FTD524uZuKoziLoBsE16Gm-Xv8Rl8HQY7gOJA/) no-repeat; 
}

/*Khung hình comment. Chứa nội dung, tên người comment, ngày đăng, Reply*/
#comments-box{ 
float: left;
width: 430px; 
margin:14px 0px 10px 0px;
border:3px solid #e3e3e3;
border-radius:4px 
}

/*Avatar comment*/
.comments-avatar{
float:left;
padding:2px;
margin:15px 0 0 0;
border:1px solid #ccc;
}

/*Khung chứa tên người comment, ngày đăng comment*/
.comments-meta{
padding:5px;
background:#F1F1F1; 
border-bottom:1px solid #E3E3E3;
}

/*Chữ “nói” sau mỗi tên comment*/
.comments-meta{
font-size:12px; 
color: #6D6F6D;
}

/*Tên người đăng comment*/
.comments-meta a{ 
font-size:12px; 
font-family: Verdana;
text-decoration:none;
}

/*Ngày, giờ đăng comment*/
.comments-timestamp{
color:#0E6284; 
font-size:10px;
font-family: Arial;
}

/*Khung chứa nội dung comment, không chứa tên người và ngày đăng comment*/
.comments-body{
font-size:12px; 
color: #000;
background:#FCFACE; /*Nền comment*/
padding:5px;
}

/*Nút Reply*/
a.comments-reply{
padding:10px 5px 10px 5px; /*Canh lề nút reply*/
display:block;
color:#0E6284;
float:right;
}

/*Định dạng size avatar comment*/
.avatar-image-container{
width:40px;
height:40px;
}

/*Avatar mặc định cho nặc danh*/
.avatar-image-container img{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8y79LWo3bFuY7RcspMfBvdbHbOd-upZVf_XlX7uYEXlkMV2-VIb-ZPL2pyjCvpKsQg6-68zLTSqgOutBAy7H5ZdTjWusDZbwpElABMoZ9rnToxQLSK0ySAEMCgv7XLNnKuZz79MHjjs/) no-repeat;
width:40px;
height:40px;
}

/*Định dạng bài viết bị xóa*/
.deleted-comment {
font-style:italic;
color:gray;
text-decoration:line-through;
}

Loại 4:

/*Comments đẹp cho blog (2)
*******************************/
.comments-block a,.comments-block p,.comments-block a img{
margin:0;
padding:0;
outline:none;
border:none;
}

/*Khung comment chính, chứa các class bên dưới*/
.comments-block{
width:495px;  
background: #FFF; /*Không dùng màu nền thì bỏ dòng này*/
padding:4px 0px 0px 0px;
font-family: Tahoma;
line-height:17px 
}

/*Khung hình comment. Chứa nội dung, tên người comment, ngày đăng, Reply*/
#comments-box{ 
float: left;
width: 437px; 
margin:14px 0px 10px 0px;
border:1px solid #ADADAD;
}

/*Avatar comment*/
.comments-avatar{
float:left;
padding:2px;
border: 1px solid #ccc;
margin: 30px 6px 0px 0px;
}

/*Khung chứa tên người comment, ngày đăng comment*/
.comments-meta{
padding:5px;
background:#eee; 
}

/*Chữ “nói” sau mỗi tên comment*/
.comments-meta{
font-size:12px; 
color: #6D6F6D;
}

/*Tên người đăng comment*/
.comments-meta a{ 
font-size:12px; 
font-family: Verdana;
text-decoration:none;
}

/*Ngày, giờ đăng comment*/
.comments-timestamp{
color:#0E6284; 
font-size:10px;
font-family: Arial;
}

/*Khung chứa nội dung comment, không chứa tên người và ngày đăng comment*/
.comments-body{
font-size:12px; 
color: #000;
background:#eee; /*Nền comment*/
padding:5px 5px 20px 5px;
}

/*Nút Reply*/
a.comments-reply{
padding:10px 5px 10px 5px; /*Canh lề nút reply*/
display:block;
color:#0E6284;
float:right;
}

/*Định dạng size avatar comment*/
.avatar-image-container{
width:40px;
height:40px;
}

/*Avatar mặc định cho nặc danh*/
.avatar-image-container img{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS8y79LWo3bFuY7RcspMfBvdbHbOd-upZVf_XlX7uYEXlkMV2-VIb-ZPL2pyjCvpKsQg6-68zLTSqgOutBAy7H5ZdTjWusDZbwpElABMoZ9rnToxQLSK0ySAEMCgv7XLNnKuZz79MHjjs/) no-repeat;
width:40px;
height:40px;
}

/*Định dạng bài viết bị xóa*/
.deleted-comment {
font-style:italic;
color:gray;
text-decoration:line-through;
}

Bạn có thể tùy chỉnh lại phông nền, màu chữ, hình ảnh, độ rộng,… Và tùy biến thêm các kiểu khác cho phù hợp với blog của mình.


Bước 5: Save template. (Lưu mẫu)

THE END.