{PHẦN MỀM - TOOLS MIỄN PHÍ}

Saturday, June 29, 2013

Tạo nút Back To Top (trở về đầu trang) cho Blogspot.

Tạo nút Back To Top (trở về đầu trang) cho Blogspot. Tiện ích này rất hữu ích cho các trang có nội dung dài.

- Bước 1: vào mục Mẫu >> Chỉnh sửa HTML
Thêm đoạn code sau vào trước thẻ </body> (Để vào sau <head> cũng được nhưng nên để code cuối trang vì ta sẽ để load sau cùng):

<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;line-height: 25px;}
#bttop:hover{border:1px solid #32cd32;background:#bada55;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='https://backlinkjs.googlecode.com/files/min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>


Ghi chú:
Ở giữa 2 thẻ <style type='text/css'> và </style> là đoạn css định hình dạng cho nút Back to Top, các bạn tùy chỉnh thoải mái.
Dòng code màu lam là thư viện Jquery, nếu có rồi thì các bạn nên xóa nó đi.
BACK TO TOP các bạn thay bằng gì cũng được (GO TOP chẳng hạn).

Bạn có thể download file min.js [tại đây - click bỏ qua quảng cáo để download] sau đó bạn có thể upload lên code google để lưu trữ lâu dài.

Chúc thành công!

1 comments:

  1. Cảm ơn bạn đã chia sẻ thông tin !
    ......................................
    LAPTOP ĐẠI DƯƠNG
    118/17 Trần Quang Diệu, P.14, Q.3, HCM Hotline: 0906.112.812 - 0909730124 (A MINH)
    Click xem chi tiết:
    laptop xách tay giá rẻ tphcm hoặc laptop xach tay gia re tphcm

    ReplyDelete

 
Copyright © . TẢI PHẦN MỀM, ỨNG DỤNG - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger