Chào các bạn, nút back to top là một nút được coi như không thể thiếu cho Blog hay một trang website nào đó, nếu nó ngắn thì không nói chứ nó dài thì hơi phiền. Trong hôm nay mình xin được hướng dẩn các bạn cách thêm Nút Back To Top vào blogspot, cùng bắt đầu nào!
Cái Nút này về căn bản là không phải do mình viết :3 , mà là mình lụm đại trên mạng và mang về Hướng dẩn cho các bạn nào đang có nhu cầu, kaka!
Bước 1: Thêm Đoạn Này Vào trên </head>
Bước 3: bây giờ có 2 kiểu trượt về cho bạn lựa chọn, bạn hãy chèn chúng lên trên thẻ </body> nhé:
Hiệu ứng 1 :Trượt lên đỉnh một cách bình thường không có hiệu ứng gì thêm
Cái Nút này về căn bản là không phải do mình viết :3 , mà là mình lụm đại trên mạng và mang về Hướng dẩn cho các bạn nào đang có nhu cầu, kaka!
Thêm nút trở về đầu trang vào Blogger
Đầu tiên nói thêm một ít là nút trở đầu trang này sử dụng Font Awesome để tạo nên cho nó đẹp.Bước 1: Thêm Đoạn Này Vào trên </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
Bước 2: Các bạn chèn đoạn css sau lên trên ]]></b:skin>
.smoothscroll-top {trong đoạn css này có các phần để giới hạn vị trí của nút trở về đầu trang, bạn có thể tự chỉnh lại cho chính xác vị trí mà bạn thích nhé.
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: bây giờ có 2 kiểu trượt về cho bạn lựa chọn, bạn hãy chèn chúng lên trên thẻ </body> nhé:
Hiệu ứng 1 :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">Hiệu ứng 2: Trượt lên đỉnh và nó nảy lên xuống khi chạm đầu trang
<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>
<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>
Lời Kết
Okey, như vậy là mình vừa hướng dẩn các bạn cách thêm nút Back to top vào blog,:p hi vọng các bạn sẽ thích nó!
Chúc Các Bạn Thành Công!
Chúc Các Bạn Thành Công!
Cửa sổ sau hiện ra để bạn tiến hành soạn bảng gõ tắt của riêng mình. Để soạn bảng gõ tắt rất đơn giản, bạn chỉ cần gõ từ viết tắt vào khung “Thay thế” và từ nguyên bản trong khung “Bởi” sau đó click vào nút “Thêm”. Như trong hình bên dưới khi mình gõ “VN” thì sẽ được Unikey tự động thay thế bởi “Việt Nam”. Còn nếu bạn muốn bỏ từ viết tắt đã tạo thì hãy chọn từ trong khung bên dưới, sau đó click vào nút “Xoá“. Sau khi soạn bảng gõ tắt thành công, bạn hãy click vào nút Lưu để lưu lại bảng gõ tắt của mình nhé!
Tuy nhiên, đến lúc này thì bạn vẫn chưa thể gõ tắt được do bạn chưa kích hoạt tính năng gõ tắt của Unikey. Để kích hoạt vô cùng đơn giản, bạn chỉ cần click chuột phải vào biểu tượng Unikey ở góc dưới bên phải màn hình và click chọn bật tính năng gõ tắt nhé!