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

Xem Demo

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.