Tạo nút Add Comment với hiệu ứng trượt

/
add a comment button
Theo yêu cầu của một bạn, lần này Noct sẽ hướng dẫn cách làm nút Add Comment (đăng một nhận xét), thủ thuật này thích hợp cho các blog có nhiều nhận xét, khi đó người đọc đỡ phải rê chuột xuống dưới cùng để đăng comment. Ở đây bổ sung thêm hiệu ứng trượt của Jquery, được cải tiến từ nút Back to Top.



Chèn đoạn CSS sau phía trên </b:skin>
a.add_comment{text-decoration:none;color:#fff}
.add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}
.add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}
.add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

Save lại, tiếp tục click chọn mở rộng mẫu tiện ích, tìm dòng sau:
<b:includable id='comments' var='post'>
Chèn bên dưới nó:
<b:if cond='data:post.numComments != 0'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

Kiểm tra kết quả. Chúc thành công.

- Thay đổi các đoạn bôi đậm màu đỏ sẽ giúp ta "trượt" đến bất cứ thành phần nào trên trang web.
Add a Comment

26 comments

Thanks noct nhé

5/04/2011 comment-delete

mà mình muốn đổi màu cái nút đó thì làm sao noct

5/04/2011 comment-delete

Cậu có thể đổi thành màu cam giống như bài tùy biến nút ReadMore. Chỉ việc copy mã màu qua thôi.

5/04/2011 comment-delete

Trông nó mượt ghê nhỉ. Mà bạn Noct cũng hướng dẫn cách làm cái emoticons trượt giống như của bạn đi :)

5/04/2011 comment-delete

Noct ít viết bài nhưng đã viết toàn bài chất lượng, cảm ơn nhé :D

5/04/2011 comment-delete

Woa! Đệ tử áp dụng ngay cho nóng =d>

5/04/2011 comment-delete

js trượt mượt quá :)

5/04/2011 comment-delete

Noct cho mình hỏi 1 chút ngoài lề với: mình muốn trên trang chủ của mình hiện số bài viết là 0, và chỉ hiện các widget, nhưng khi đó, trên trang chủ sẽ có dòng chữ "No posts". Vậy có cách nào để bỏ dòng chữ này đi ko nhỉ?

Tom
5/04/2011 comment-delete

Bạn tìm Blog1 rồi chèn thêm như thế này:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog posts' type='Blog'/>
</b:section>
</b:if>

Lần sau muốn hỏi chuyện gì ngoài lề thì vào phần hỏi đáp nhé.

5/04/2011 comment-delete

nút xuất hiện trong các trang tĩnh, làm thế nào để khắc phục? :D

5/06/2011 comment-delete

mình thấy hiệu ứng này rất hay, nhưng js hơn nặng gần 25kb cơ. Ban có thể rút gọn js xuôg 1 nửa dc không? vì blog mình dùng khá nhiều js rồi:(

5/06/2011 comment-delete

Ý bạn là cái Jquery.js ?

Bạn có biết cái jquery được host trên server của Google nó load nhanh gấp mấy lần cái tiện ích Recent comments mà bạn đang dùng không ?

Đây là một trong những ứng dụng nhỏ gọn nhất của jquery, muốn làm đẹp mà cứ ngại này ngại nọ thì đừng xài gì cả. Nếu nói Noct Blog sử dụng đến 7 hiệu ứng Jquery thì bạn có tin không ?

5/06/2011 comment-delete

@Pedro : Thanks for reporting this problem, I edited the post.

PS: use English if you can.

5/06/2011 comment-delete

blog của bác noct rất đẹp và sáng sủa thèm quá :P

5/16/2011 comment-delete

Good, No problem!

5/26/2011 comment-delete

anh noct ơi em muốn hỏi là sao của em bây h nó ko trượt như trong demo mà nhảy xuống luôn

6/20/2011 comment-delete

của mình sao nó ko trượt, ko nhảy gì luôn ....
http://zeroitvn.com

6/21/2011 comment-delete

Bạn đang dùng jQuery Menu nên sẽ xung đột với thủ thuật jQuery khác, ngoài ra thì bạn phải sửa scrollTop:$(".comment-form") thành scrollTop:$(".comment_form")

6/21/2011 comment-delete

anh ơi lâu ko để ý , bây h nút add comment của em ko trượt như trong demo nữa
xem zùm em với ^^

ko biết có phải nó xung đột với các tab ko nhỉ, fix lại như thế nào hả anh

6/23/2011 comment-delete

Buttom này thuần việt đây: http://gold24k.info/diendan/images/colorstyle/buttons/reply.gif

7/28/2011 comment-delete

Cool ^_^

1/01/2012 comment-delete

Hi Noct.. this is cool.. how to create the emoticon spoiler?

1/15/2012 comment-delete

theo mình nên sửa điều kiện hiển thị của button từ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
sang
<b:if cond='data:post.numComments &gt; 0'>
tác dụng là sẽ kiểm tra nếu số nhận xét > 0 thì mới hiển thị button. Mặc khác button vẫn không hiển thị đối với các trang tĩnh
Demo của mình: http://itdl.w3solution.net/2012/02/add-comment-with-jquey-scroll.html

2/04/2012 comment-delete

@chjp cám ơn ý kiến của bạn, đã cập nhật

2/07/2012 comment-delete

@Noct

cái nút reply trong comment này hay quá, mình muốn làm mà không được ;(((

3/31/2012 comment-delete

hjc..sao tôi chèn mà nó chẳng hiện ra

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License