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

Blog nhiều nhận xét là một điều ai cũng muốn, tuy nhiên khi lượng nhận xét có quá nhiều thì việc phải kéo thanh cuộn hoặc con chạy của chuột xuống tới khung nhận xét là một điều khá bất tiện và tốn thời gian. Bài viết này namkna sẽ giúp bạn  tạo một nút Add comment giống như một phím tắt dưa bạn tới khung comment chỉ với một lần bấm chuột mà không mất công kéo con chạy hoặc thanh cuộn (nó hoạt động tương tự hiệu ứng back to top). Thủ thuật này kết hợp thêm cả hiệu ứng Jquery nên chuyển động mượt mà giúp tính thẩm mỹ của blog bạn được nâng cao.

Đặc biệt tiện ích này hoạt động tốt với mẫu Thread comment mới của blogger. Đây sẽ là một trải nghiệm hoàn toàn mới cho những bạn ưa khám phá và vọc code.

Mô tả thủ thuật: Ngay bên dưới bài viết của bạn sẽ xuất hiện một nút Add a comment (nút này bạn có thể thay đổi theo ý bạn) Khi bạn bấm vào đó thì bạn sẽ được di chuyển đến khung nhận xét một cách nhanh chóng mà không mất thời gian để kéo chuột hay con chạy.

» Cách tạo nút Add Comment với hiệu ứng mượt mà từ thư viện Jquery cho Blogspot.

1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Tempalate)

3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn đoạn CSS sau lên phía trên thẻ đóng ]]</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}

5. Với những bạn đang sử dụng mẫu Thread commemnt phân cấp mới của blogspot thì tìm đoạn code bên dưới:

<b:includable id='threaded_comments' var='post'>

- Chèn vào bên dưới đoạn code vừa tìm được đoạn code sau:

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

Tùy chỉnh:

• Thay: ADD a comment thành dòng chữ bạn muốn như: Đến nhạn xét, đăn nhận xét,...
• Xoa đoạn màu xanh nếu blog của bạn đã có thư viện Jquery rồi nha.
  

6. Lưu mẫu lại và quay trở lại một bài viêt bất kỳ của bạn để xem kết quả bạn đã làm được nha.

Chúc thành công!

Theo Terocket

Live Demo

http://chiecvicuatoi.blogspot.com/2015/11/hinh-anh-gia-inh-tu-viet-nam.html#comment-form

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..