Tạo nút Add Comment với hiệu ứng trượ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:blog.pageType == &quot;item&quot;'>

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

Theo: Noct-land