Tạo nút trở về đầu trang cho blogspot

Nút trở về đầu trang hiện nay có rất nhiều trên các website và blogspot .Nó giúp độc giả có thể di chuyển lên trên đầu trang một cách nhanh chóng.Chính vì sự tiện lợi đó nên nó đã được rất nhiều người sử dụng cho website của mình.

Có những cách nào để tạo nút trở về đầu trang cho blogspot ?

Tạo nút trượt thì có rất nhiều cách như là tạo bằng jQuery - cái này chạy rất ổn,hoặc là bạn có thể dùng Javascript.cách tạo bằng jQuery thì mình đã nói trong một bài ở trước rồi,nên trong bài này mình sẽ hướng dẫn các bạn tạo nút trở về đầu trang cho blogspot bằng Javascript.

Thêm nút trở về đầu trang vào Blogger

Bước 1 : Tích hợp Font Awesome vào Blogger

Vào chỉnh chỉnh sửa hmtl của blogger và chèn đoạn mã sau vào dưới thẻ <head> hoặc trên thẻ </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Bước 2: Thêm CSS

Tiếp theo các bạn ctrl + F và tìm thẻ ]]></b:skin> .Sau đó chèn đoạn css sau lên trên thẻ đó :

.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;
}

Các bạn nhớ chỉnh lại vị trí của nút trở về đầu trang cho phù hơp với blog của bạn nhé.

Bước 3 : Tạo hiệu ứng cho nút trở về đầu trang.

Các bạn lựa chọn 1 trong 2 hiệu ứng sau đây để chèn vào hmtl của blogspot nhé,chèn chúng lên trên thẻ </body>

Một là trượt lên đỉnh một cách bình thường không có hiệu ứng gì thêm:

<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>

Cái thứ 2 trượt lên đỉnh và nó nảy lên xuống khi chạp đầu trang:

<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').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Khi chèn xong các bạn lưu template lại là xong nhé.Quay lại trang chủ và xem lại thành quả của mình đi xem nào.Nếu có thắc mắc gì các bạn vui lòng để lại comment trong phần bình luận nhé.Hoặc comment vào phần hỏi đáp trên thanh ngang.

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

Xem thêm >> Cách phát hiện máy tính có dính KeyLogger hay không