Nút Lên Đầu ẩn hiện cho blogger

Đôi khi bài viết quá dài sau khi đọc xong cũng ngại kéo lên trên, vì vậy giải pháp thêm một button Lên Trên sẽ thay ta công việc này. Cũng có rất nhiều bài viết nói về vấn đề này nhưng bài viết sau mình sẽ hướng dẫn thêm nút Lên Đầu , nút này chỉ xuất hiện khi bạn kéo thanh trượt xuống một khoảng cách và ẩn đi khi ở đầu trang.

Blog của mình hiện cũng đang sử dụng tiện ích này

Để thêm tiện ích này bạn hãy làm theo các bước đơn giản sau

1. Vào Blogger > Mẫu > Chỉnh sửa HTML

2. Dán đoạn sau trước ]]></b:skin>

#top-nav {position: fixed;cursor: pointer;background: rgba(0, 0, 0, 0.78);color: white;padding: 10px 20px;border-radius: 3px;bottom: 22px;right: 45%;}
#topcontent {margin-bottom: 10px;}

3. Tìm thẻ đóng </body> và dán đoạn sau vào trước nó

<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#top-nav').show();
    } else {
        $('#top-nav').hide();
    }
});
$('#top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});
//]]>
</script> 

4. Trước </head> các bạn dán đoạn code sau:

<a id='top-nav' title='Back to top'>Lên Đầu</a> 

5. Lưu mẫu và ra xem kết quả

Chúc blog bạn ngày một đẹp hơn và có thêm nhiều độc giả