TẠO KHUNG COMMENT ĐẸP CHO BLOGGER

CREATE A BEAUTIFUL COMMENT BOX FOR BLOGSPOT

Dạo này tôi thấy có rất nhiều trang Blogspot rất đẹp. NOCT-Land là một trong số những trang Blogspot mà tôi ngưỡng mộ nhất vì độ thẩm mĩ rất cao, tốc độ rất nhanh và có nhiều thủ thuật rất hay.
Một trong những thủ thuật của NOCT mà Share All World đang áp dụng là tạo khung comment đẹp cho Blog mà tôi sẽ giới thiệu với các bạn dưới đây.

Khi áp dụng thủ thuật này, tôi đã gặp phải một vấn đề nhỏ nhưng hậu quả lại rất to! Đó là Avatar không hiển thị trong comment !? Hi.. nế không khắc phục được thì coi như vứt bỏ cái thủ thuật này rồi!
Rất may, sau khi mày mò, tôi phát hiện ra rằng sở dĩ Avatar không hiển thị là do 1 đoạn code đã bị tôi bỏ khỏi template khi áp dụng 1 thủ thuật trước đây. Đó là đoạn code <b:include data='blog' name='all-head-content'/>. Như vậy, nếu bạn nào áp dụng thủ thuật tuyệt vời này mà gặp tình trạng trên thì chỉ việc kiểm tra xem có thiếu đoạn code trên trong template không nhé. Nếu thiếu thì bổ sung vào là xong!
Nào, chúng ta bắt tay vào việc thôi!

Trước tiên, bạn hãy xóa hết các đoạn CSS của khung comment cũ trong template. Chúng thường có dạng như sau:

#comments-block {...}
.comment-body {...}
.comment-footer {...}
......

Tiếp theo, bạn chèn đoạn code CSS sau phía trên </b:skin>

.comments-block a,.comments-block p,.comments-block a img{margin:0;padding:0;outline:none;border:none}
.comments-block{width:600px;background:#fff;padding:10px;font-family:Arial;line-height:18px}
.comments-block .arrow{float:left;margin:22px 0 0 6px;display:block;width:8px;height:16px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjF-LkOMm7PAFD53tkRILyIEx6Skyn6xlJHNHJfdhq51mb0qGlCmXtsGhjHMD92b93hUniLmYiXuJ2vLpWbE864RdV5KN1lz8e_upnP_XdAxBJcDnflAPy54vVVnngyxB_i8mn29Lh-qA/) no-repeat}
#comments-box{float:right;width:510px;margin-bottom:10px;border:5px solid #e3e3e3;border-radius:8px}
.comments-avatar{float:left}
.comments-meta{padding:5px;background:#F1F1F1;border-bottom:1px solid #E3E3E3}
.comments-meta{font-size:18px}
.comments-meta a{font-size:18px;color:#0E6284;text-decoration:none}
.comments-timestamp{color:#0E6284;font-size:12px}
.comments-body{font-size:13px;padding:5px;background:#fff}
a.comments-reply{margin:10px 10px 0 0;display:block;width:68px;height:28px;float:right}
.avatar-image-container{width:60px;height:60px;padding:2px;border:1px solid #ccc}
.avatar-image-container img{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvM76OjlwM_2dllpucz7VoF7eYPdZ0GvWmnUCbb6RNkfPhUr8gGldEMcuFPWNbGAdShNndkrb2dd0ZZGnVlhdCsOOvQvNNrC6nZ4eI1FL5591waoKhBRpUCqvrxdDhcuNaSagjkYDXOZU/) no-repeat;width:60px;height:60px}

Sau đó bạn lưu lại mẫu và chọn "Mở rộng mẫu tiện ích" và tìm đến đoạn mã sau:

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

Thay thế toàn bộ đoạn code trên bằng đoạn code dưới đây:

<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=9215968288684509015&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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVQbI8DsA2fbpGbzzb3FztUAoFxeE8II-tYEu2O3n2Uo5GzwUAStOvRshUx6esaX0KrvxLuiGbS8eEPD-8h5MGlIEcfaK3nLNoo_nm3wrX1s7Y24Cfh-32_mdxrte3Vc3-Qu1Nxxne7zk/'/></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>
Thay Blog ID của bạn vào. Lưu mẫu và thưởng thức thành quả của bạn thôi. Chúc bạn thành công!

- Blog ID có thể thấy dễ dàng ở trên thanh địa chỉ của trình duyệt khi bạn đăng nhập vào Blogger.com.
- Bạn có thể thay đổi độ rộng khung để phù hợp với trang nhà bằng cách thay các giá trị của thuộc tính WIDTH tô đỏ ở trên.

=== Nhấn vào đây để tìm bài viết này trên google ===