• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tùy biến Comments Block cho blogspot

24
27/02/2011

Để có phần nhận xét (Comments) đẹp cho blogspot thì bạn phải tùy biến hai thành phần quan trọng là comments-block và comment-form. Tiếp sau bài hướng dẫn tạo Comment Form đẹp, bài viết này sẽ hướng dẫn cách tạo một Comments Block đẹp.

Bạn có thể xem một ví dụ Demo ở hình minh họa bên dưới.


Nào chúng ta cùng thực hiện theo các bước như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Dùng từ khóa comments-block, tìm đến đoạn code như bên dưới.

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + 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:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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/>
</dt>
<dd class='comment-body' 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/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

Thay toàn bộ đoạn code trên bằng đoạn code bên dưới.

<div id='comments-block1'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-block'>
<div class='comments-wrapper'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<div class='comments-avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>

<div class='comments-meta'>
<strong>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<a class='comments-autor-name'> <data:comment.author/></a>
</b:if>
</strong>
<div class='comments-timestamp'>
<span class='comment-timestamp'>
<a class='comment-permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</div>

<div class='comments-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<div class='arrow'></div>
<p><data:comment.body/></p>
</b:if>
</div>
</div>
</div>
</div>
</b:loop>
</div>

Bước 2. Đặt code CSS bên dưới vào trước dòng ]]</b:skin>.

(Lưu ý trước khi thực hiện Bước 2, hãy dùng từ khoá comments tìm đến code CSS liên quan rồi xóa hết)

#comments-block1 {padding-left:10px}
.comments h4{padding:10px 0 20px 0}
.comments-wrapper{border-bottom:1px solid #e1e1e1;margin-bottom:10px}
.comments-wrapper:last-child{border-bottom:none}
.comments-block{padding:0 10px}
.comments-meta{font-size:.857em;text-align:right;line-height:1.286em;width:98px;float:left;padding-top:16px}
.comments-meta a:hover{text-decoration:none;border-bottom:1px dotted #004A80}
.comments-timestamp{font-size:.857em}
.comments-avatar{float:right}
.comments-body{font-size:0.857em;background:#FFF;margin:10px 0 15px 113px;border:1px solid #E1E1E1;-moz-border-radius:5px;-webkit-border-radius:5px;padding:10px;width:400px}
.comments-body .arrow{width:0;height:0;line-height:0;float:left;margin:5px 0 0 -20px;border-bottom:10px solid transparent;border-right:10px solid #fff;border-top:10px solid transparent}
.comments-body a{border-bottom:1px dotted #004A80}
.comments-body a:hover{text-decoration:none;border-bottom:1px solid #004A80}

Chú ý trong đoạn code trên, điều chỉnh width:400px để định chiều rộng phần thân chứa nội dung nhận xét phù hợp với chiều rộng phần comments-block.

Lưu Template là OK.

Bạn hãy nghiên cứu thêm về CSS để tùy biến cho phần Comments Block theo ý muốn của mình nhé.
:44)

{24 bình luậnAdd yours ?}

22:02:00, 27 thg 2, 2011

Mở hàng nào :51) Mới thay Temp, mời Hà sang dự tân gia nhé :66)

Reply
22:16:00, 27 thg 2, 2011

@iTechPlus http://www.itechplus.info/ mới thay Template coi bộ gọn gàng và good hơn đấy. Chúc mừng tân gia nhé. :66)

Reply
22:25:00, 27 thg 2, 2011

Pác kiếm đâu template đẹp vậy, share với đc hem :51)

Reply
22:37:00, 27 thg 2, 2011

đề nghị share cho ae xài nhé cái template đẹp quá

Reply
23:02:00, 27 thg 2, 2011

Sao thấy giông giống cái form comment bên em :60)

Reply
23:06:00, 27 thg 2, 2011

Làm sao mà khi Comment Block hiển thị trên các trình duyệt ko bị lỗi anh Hà ?
Phần Comments-body của em hiển thị nhìn kinh khủng quá :70)

Reply
07:15:00, 28 thg 2, 2011

#comment-block phải có width:100% nếu k một số Template sẽ bị lệch, ngoài ra phải để padding, margin phù hợp nữa, IE rất kén chọn

Reply
07:18:00, 28 thg 2, 2011

@Noct Hiện nay Comments Block bên e và bên a là theo phong cách Wordpress thôi mà, avatar cho float qua phải. Nếu ai phân tích kỹ phần comments-block sẽ tự tùy biến theo ý muốn được thôi :67)

Reply
20:57:00, 28 thg 2, 2011

Cái bác Noct có thủ thuật phân trang bên tiếng cái style nó đẹp quá mà tiếc là làm ko được bác có thể xem qua và viết cái tut làm mấy cái style phân trang này ko
Link http://noctblogtip.blogspot.com/2011/01/numbered-page-navigation-widget-for.html

Reply
21:12:00, 28 thg 2, 2011

Kiểu phân trang này a đã hướng dẫn lâu rồi mà. Vào xem nhé. Tìm trên nhãn Navigation trên sidebar để xem thêm nhiều kiểu phân trang khác mà tham khảo nhé.

Reply
20:28:00, 1 thg 3, 2011

http://vn-share4u.blogspot.com/2011/02/funny-korean-comics-truyen-tranh-vui_5213.html
Bạn ơi web mình phần CM ko đc đẹp lắm, bạn có thể chỉ mình cách có làm khung cho phần CM hem

Reply
21:32:00, 1 thg 3, 2011

Em chỉ cần thêm CSS nữa là ổn thôi.

Ví dụ

#comments {padding-left:20px}
.comments-body{font-size:0.857em;background:#FFF;margin:10px 0 10px 15px;border:1px solid #E1E1E1;width:100%}

Em tìm hiểu thêm về CSS cho phần comments để áp dụng. :48)

Reply
00:32:00, 2 thg 3, 2011

comment của Blogspot phải 200 nó mới phân trang như thế thì rất dài, em muốn 200 cái comment đó nó cuộn lại thì làm thế nào bác Hà??? Ý em là như thế này nè : http://fix.blogtruyen.com/2010/12/fix-link-die.html

Reply
07:09:00, 2 thg 3, 2011

Em đọc bài này nhé.
:45)

Reply
07:19:00, 2 thg 3, 2011

Mình thích Comments Form của Disqus nên làm nó hơi giống, tuy nhiên nếu comment của admin cũng lùi vào 20px-30px như của nó thì lại hiển thị không tốt trên IE6 ( các trình duyệt khác OK ). Thật tiếc !:57) Không biết Hà có cao kiến gì ?:62)

Reply
08:53:00, 2 thg 3, 2011

Thị cậu đừng cho nó lùi trên IE6 thôi, đọc bài này để ứng dụng nhé bạn.
:48)

Reply
14:51:00, 23 thg 3, 2011

Bro Huỳnh ơi Giúp dùm cái Comments không hiển thị Avatar tuy đã làm theo cách của Bro Huỳnh hướng dẫn nhưng vẩn potay cứu cứu....thanks

Reply
16:42:00, 23 thg 3, 2011

Tịch Phi Dương có mấy cái blog, vậy cái nào bị vậy, chưa có thời gian xem từng cái của bạn. :51)

Reply
12:02:00, 24 thg 3, 2011

cam on ban minh da lam duoc.

Reply
15:40:00, 24 thg 3, 2011

@hl4v Blog bạn cài đặt Comments Block này vô đẹp hơn, tuy nhiên bạn cần edit Template cho nhẹ hơn nhé, load hơi lâu đấy :56)

Reply
00:28:00, 22 thg 4, 2011

cái temp cua em chẳng biết nó code kiểu gì không tìm thấy :62)
với lại chỗ viết nhân xét mấy cái dòng :
" Đăng một Nhận xét
Wellcome !
Nhận xét với tư cách:
Đăng ký qua email "
làm sao để đổi màu của nó vậy em tìm mãi mà o đổi đựơc
http://mmozo.blogspot.com/ anh xem giúp em với

Reply
00:22:00, 15 thg 5, 2011

Chào bác.

Phải nói thật là tôi học được rất nhiều điều từ site này của bác. Rất cảm ơn bác.

Bác cho tôi hỏi: có thể tùy biến phông chữ, hình/mầu nền.. của phần 'comment' mà người dùng nhập văn bản vào không? Tức là phần text input của comment editor.

Cảm ơn bác.

Reply
21:26:00, 18 thg 10, 2011

Anh Hà ơi. Anh thử trang trí phần comment giống như box chat của yahoo đi http://ca7.upanh.com/16.282.20609716.RNN0/yahoo.jpg ,có box Emoticons ẩn sau mặt cười, chèn link = chia sẻ tập tin, T= thẻ chữ in đậm, in nghiêng, vv... hjhjhj

Reply
18:55:00, 10 thg 10, 2015

thanks

http://xempfaucet.blogspot.com/

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn