Hiện nay nút lên đầu trang/ Back to top rất thông dụng. Nó được các nhà sản xuất template, theme wordpress áp dụng sẳn trong template/ theme.
Lợi ích của nó là giúp cho người đọc trở lên đầu trang 1 cách nhanh chống mà không phải kéo thanh cuộn.
Tuy nhiên có một vài template không có sẵn chức năng vì thế hôm nay Văn Thắng Blog sẽ hướng dẫn các bạn làm chức năng này cho Blogspot
Demo như hình:
Các bước làm như sau:
Lợi ích của nó là giúp cho người đọc trở lên đầu trang 1 cách nhanh chống mà không phải kéo thanh cuộn.
Tuy nhiên có một vài template không có sẵn chức năng vì thế hôm nay Văn Thắng Blog sẽ hướng dẫn các bạn làm chức năng này cho Blogspot
Demo như hình:
Thêm nút lên đầu trang/ Back to top |
Bước 1: Các bạn vào phần chỉnh sửa mẫu và tìm đoạn ]]>< ( Ctrl + F )
Bước 2: Sau khi tìm thẻ xong các bạn thêm toàn bộ code dưới lên trên ]]><
#scrolltotop{border-radius:2px;background:#0093da;text-align:center;line-height:40px;-o-border-radius:2px;-ms-border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;position:fixed;bottom:10px;right:0;cursor:pointer;display:none;color:#fff!important;font-size:25px;width:100%;height:40px;margin-right:14px}key{border:1px solid gray;font-size:1.2em;box-shadow:1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin:2px 3px;padding:1px 5px}.post-header-line-1 {overflow:hidden}
#scrolltotop{color: #000;width: 40px !important;}
Bước 3: Các bạn tìm đến thẻ </body> và thêm toàn bộ code dưới lên trên nó
<div id='scrolltotop'><i class='fa fa-angle-up'/></div><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#scrolltotop").fadeIn()}else{$("#scrolltotop").fadeOut()}});$("#scrolltotop").click(function(){$("body,html").animate({scrollTop:0},800)})});</script>
Bước 4: Các bạn có thẻ tùy chỉnh mã màu lại phù hợp với template của mình
Bước 5: Lưu lại và vào trang xem kết quả
Chúc các bạn thực hiện thành công.
0 Bình luận, nhận xét,đánh giá bài viết