Hôm nay mình sẽ hướng dẫn các bạn tạo Nút Back To Top đẹp cho Blogspot (Blogger), thích hợp cho các Blog bài dài và tiện cho độc giả.
2. Tiếp tục tìm đến thẻ đóng ]]></b:skin> và thêm toàn bộ code sau vào trước nó.
3. Tìm đến thẻ đóng </body> và thêm toàn bộ code sau vào trước nó.
Đó là toàn bộ thủ thuật - Chúc các bạn thành công!
Tạo nút Back To Top đẹp cho Blogspot (Blogger)
Tiến hành
1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML >> Đặt code sau trong cặp thẻ <head> và </head>.
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Nếu template của bạn đã có thì có thể bỏ qua bước này.
2. Tiếp tục tìm đến thẻ đóng ]]></b:skin> và thêm toàn bộ code sau vào trước nó.
.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;
}3. Tìm đến thẻ đóng </body> và thêm toàn bộ code sau vào trước nó.
<div class="smoothscroll-top">4. Lưu lại và tận hưởng kết quả.
<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>
Đó là toàn bộ thủ thuật - Chúc các bạn thành công!
Đăng nhận xét