Hướng dẫn tạo nút lên đầu trang (Back To Top) cho Blogspot

Hướng dẫn tạo nút lên đầu trang (Back To Top) cho Blogspot

Tạo nút lên đầu trang cho Blogspot là một trong những yếu tố cần thiết cho một website. Đôi khi các bài viết của bạn rất dài, người dùng muốn lên đầu trang để chọn các menu thì phải quận. Khi đó nếu bạn có nút lên đầu trang (Back To Top) thì sẽ tiết kiệm được rất nhiều thời gian của người đọc.

Ví dụ như ở blog của mình đang sử dụng, các bạn chỉ cần click vào nút có hình mũi tên ở phía cuối trang để lên đầu trang.

cach tao nut len dau trang blogspot

Hướng dẫn tạo nút lên đầu trang

Bây giờ mình sẽ hướng dẫn các bạn cách tạo nút lên đầu trang cho Blogger. Nút được tạo từ HTML,  CSS và JavaScript. Sau đây là bốn bước để cài đặt nút lên đầu trang cho blog của bạn:

Bước 1

Đăng nhập vào trang quản lý Blogger.com chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML . Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head> hoặc trước thẻ <head>


<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

Bước 2

Bạn thêm tiếp code dưới đây vào trước thẻ ]]></b:skin></style>


.smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#2ba6e1;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:5px;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}

Bước 3

Thêm mã dưới đây trước thẻ </body>


<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

$(document).on( ‘scroll’, function(){

if ($(window).scrollTop() > 100) {
$(‘.smoothscroll-top’).addClass(‘show’);
} else {
$(‘.smoothscroll-top’).removeClass(‘show’);
}
});

$(‘.smoothscroll-top’).on(‘click’, scrollToTop);
});

function scrollToTop() {
verticalOffset = typeof(verticalOffset) != ‘undefined’ ? verticalOffset : 0;
element = $(‘body’);
offset = element.offset();
offsetTop = offset.top;
$(‘html, body’).animate({scrollTop: offsetTop}, 600, ‘linear’);
}
//]]>
</script>

Bước 4

Cuối cùng các bạn chọn Lưu chủ đề và load lại trang của mình để xem thành quả. Chúc các bạn thành công

7

Không có Bình luận

Viết bình luận