Form comment đẹp cho Blogspot
Đăng bởi: CTG blog
Thứ Hai, tháng 9 05, 2011
[38]
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.


CÁCH THỰC HIỆN

1. Đăng nhập Blogger
2. Chọn: Mẫu > Chỉnh sữa HTML

3. Chèn script.

Bước 1: Tìm đến đoạn code có dạng sau:

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

Bước 2: Thay thế toàn bộ code trên bằng đoạn code sau:

<!--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>

- Nhớ đổi 5950416464056762250 thành ID của blog bạn.

- Có thể thay Trả lời bằng hình ảnh.

Nếu thay bằng hình ảnh thì thay chữ Trả lời bằng dòng code:

<img src"LINK_HÌNH_REPlY"/>

Bước 3: Tìm và xóa hết các đoạn CSS của khung comment cũ trong template đi, chúng thường có dạng:

#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://lh5.googleusercontent.com/-9mPQEj88ZCg/Tml6yP3LruI/AAAAAAAAK8M/fReyBIqxiuc/comment-arrow_3.png); 
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://lh3.googleusercontent.com/-GRMAdA4NTPs/Tml0ijaf5dI/AAAAAAAAK8M/UjfqdYlNHkI/comment-arrow_2.png) 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.
| Edit

16 nhận xét:

Trả lời
A3FC nói...
lúc 10:55 13 tháng 10, 2011  

:haha

Trả lời
Blogger nói...
lúc 19:16 17 tháng 10, 2011  

Rất hữu ích và nhiều lựa chọn, cám ơn bạn mình sẽ copy để post trên blog của mình ( ghi nguồn bacsklink blog của bạn cẩn thận ) bạn nhé

Trả lời
Vinh nói...
lúc 20:51 14 tháng 12, 2011  

hay lắm mình đang tham khảo cái này, tks

Trả lời
Minh Tâm nói...
lúc 20:29 19 tháng 2, 2012  

@A3FC :f

Trả lời
Gamer nói...
lúc 09:02 8 tháng 3, 2012  

cám ơn bạn nhiều lúc đầu mình dùng cái camments block of Noct mà hình ảnh avata bị lỗi hiển thị k hết may mà tìm được cái này thay thanks!!!!

Trả lời
Nguyễn Phước Lộc nói...
lúc 09:52 3 tháng 4, 2012  

Hal lắm !

Trả lời
Ngọc Đạt nói...
lúc 13:37 7 tháng 5, 2012  

Tks nha, áp dụng thành công rồi.keke

Trả lời
Blog's Nguyễn Hoàng Sơn nói...
lúc 15:34 15 tháng 5, 2012  

Demo..............

Trả lời
10a4 forever nói...
lúc 17:38 21 tháng 5, 2012  

bước 4 chèn o dau zay ban

Trả lời
Rua nói...
lúc 08:26 22 tháng 5, 2012  

@ 10a4 forever: Sau khi xóa hết các CSS thực hiện ở bước 3 đó, thay thế nó bằng CSS ở bước 4.

Trả lời
Cổ Nguyệt (古 月) nói...
lúc 15:50 4 tháng 7, 2012  

@Ruacài này không trả lời ngay sau vi trí của comment đc ah, chỉ hiện tên thôi :

Trả lời
KakA nói...
lúc 23:06 31 tháng 7, 2012  

mình đang áp dụng cái này của bạn, tuy nhiên mình phát hiện ra nhược điểm đó là ko trả lời đc cm và nếu như có biểu tượng cảm xúc thì nó chỉ hiện ra ở comment đầu tiên, các cm sau ko hiện ra đc. Bạn giúp mình khắc phục vs. Thanks nhiều

BloG mình: http://khongphaixoan.blogspot.com

Trả lời
KakA nói...
lúc 23:07 31 tháng 7, 2012  

@Cổ Nguyệt (古 月) :

mình cũng mắc lỗi giống bạn đây

Trả lời
Rua nói...
lúc 08:44 1 tháng 8, 2012  

Biểu tượng cảm xúc vẫn hiện đủ mà bạn :)

Trả lời
na monopoly nói...
lúc 21:24 23 tháng 8, 2012  

hay

Trả lời
Truyện Bùi nói...
lúc 13:57 30 tháng 4, 2013  

Mình có trang thủ thuật vi tính, và muốn liên kết với bạn. Hy vọn bạn sẻ đống ý!

Đăng nhận xét

Xem thêm [▼/▲]

Chèn thêm Emoticons vào nhận xét:
Rê chuột lên Emoticons để thấy các kí hiệu tương ứng!

==============================================
Lên đầu trang
Xuống cuối trang