Chủ Nhật, 8 tháng 5, 2016

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:
Thêm nút lên đầu trang/ Back to top cho Blogger/ Blogspot
Thêm nút lên đầu trang/ Back to top
Các bước làm như sau:
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){$(&quot;#scrolltotop&quot;).fadeIn()}else{$(&quot;#scrolltotop&quot;).fadeOut()}});$(&quot;#scrolltotop&quot;).click(function(){$(&quot;body,html&quot;).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.


Subscribe box

Nhập địa chỉ Email và bấm đăng ký, bạn sẽ nhận được bài viết mới nhất từ NCQ BLOG hoàn toàn miễn phí qua Gmail!

0 nhận xét: