Hướng dẩn tạo Form comment đẹp cho Blogspot

Thứ Năm, 8 tháng 12, 2011
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 Dashboard (Bảng điều khiển)
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML)
3. Đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. 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/AAAAAAAACeU/3ayaSwKIRxw/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/AVvXsEhRF0LCFuaGyvUU4V0ZohhFYkWXQdKzxDEeqNH4U_FlJQtJdaHnYY9Aet0rfCYcIAz-XVQMWkYJ440hOyub0zMabNji3ZAFXSzU0bTgYUBG6g53XG-AQnQDMAwlben-xWa-ENBIyXG8pW8/) 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/AAAAAAAACdI/52wBpPptPp8/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/AVvXsEhRF0LCFuaGyvUU4V0ZohhFYkWXQdKzxDEeqNH4U_FlJQtJdaHnYY9Aet0rfCYcIAz-XVQMWkYJ440hOyub0zMabNji3ZAFXSzU0bTgYUBG6g53XG-AQnQDMAwlben-xWa-ENBIyXG8pW8/) 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://lh5.googleusercontent.com/-XmhGCqc59SQ/Tml0iSwiGkI/AAAAAAAACdA/YTtUPpJs1yg/comment-arrow_1.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: 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/AVvXsEhRF0LCFuaGyvUU4V0ZohhFYkWXQdKzxDEeqNH4U_FlJQtJdaHnYY9Aet0rfCYcIAz-XVQMWkYJ440hOyub0zMabNji3ZAFXSzU0bTgYUBG6g53XG-AQnQDMAwlben-xWa-ENBIyXG8pW8/) 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/AVvXsEhRF0LCFuaGyvUU4V0ZohhFYkWXQdKzxDEeqNH4U_FlJQtJdaHnYY9Aet0rfCYcIAz-XVQMWkYJ440hOyub0zMabNji3ZAFXSzU0bTgYUBG6g53XG-AQnQDMAwlben-xWa-ENBIyXG8pW8/) 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.

Nguồn:  blog caytamgui
Tags:

Ý kiến bạn đọc [ 0 ]


Ý kiến của bạn