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 Blogger2. 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 == "item"'>
<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.
Chúc thành công!
Bài viết có sử dụng một phần tư liệu của Noct-land trên mẫu comment cũ.
Nhận xét