Thứ Bảy, 23 tháng 2, 2013

Hướng dẫn cách tạo nút Back To Top cho Blogspot

Sau đây mình xin giới thiệu các bạn cách tạo nút Back To Top đơn giản  cho Blogspot.
Demo như hình ảnh:


Các bạn vào Mẫu >> Chỉnh sửa HTML
Tìm đến thẻ đóng </body>
Thêm đoạn code sau  ngay trước </body>


<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='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.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>

Trong đó:

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.

Ở 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 chữ màu hồng các bạn có thể thay tên theo ý muốn

0 nhận xét:

Đăng nhận xét

 
-------------------------------------- linhtuty