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.
Bước 3 : Thêm đoạn code dưới đây vào phía trên ]]></b:skin>
<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>
.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ả :
Kết quả :
Chúc các bạn thành công
Không có nhận xét nào:
Đăng nhận xét