Làm sao để tạo button "Back to Top" cho Blogspot

Button "Back to Top" sẽ rất hữu ích với blog của bạn. Thay vì phải rê chuôt nhiều lần, button này giúp người đọc dễ dàng di chuyền lên đầu trang một cách nhanh chóng.

Nếu bạn vẫn chưa biết cách tạo button "Back to Top" cho Blogspot thì bài viết này là dành cho bạn

Tạo button "Back to Top" cho Blogspot

Bước 1 : Thêm đoạn code dưới đây vào phía dưới <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Bước 2 : Tạo một Widget HTML/Javascript mới trong Bố cục và điền đoạn code dưới đây vào. Hoặc bạn cũng có thể chèn đoạn code này vào bất kì vị trí nào bạn muốn.

<a href="#" class="backtotop"><i class="fa fa-angle-up"></i></a>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop).fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Bước 3 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>

.backtotop {
z-index: 5;
width: 50px;
height: 50px;
font-size: 25px;
line-height: 50px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
background: #00A4E4;
text-align: center;
color: #FFF;
}
.backtotop i {
color:#FFF:
}
.backtotop:hover {
background: #464646;
color: #FFF;
}

các bạn có thể thay #00A4E4 bằng mã màu các bạn thích

Kết quả :

Chúc các bạn thành công