Trang chủ Code HTML - CSS - ? Thủ Thuật Thủ Thuật Blogger Tiện ích Blogger Tạo nút Back To Top đẹp cho Blogspot (Blogger)

Tạo nút Back To Top đẹp cho Blogspot (Blogger)

Unknown 16:01 Code, HTML - CSS - ?, Thủ Thuật, Thủ Thuật Blogger, Tiện ích Blogger

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

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

4. Lưu lại và tận hưởng kết quả.
Đó 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)

Đánh giá bởi Unknown trên 16:01 Xếp hạng: 5

Không có nhận xét nào:

Đăng ký: Đăng Nhận xét (Atom)

Bản quyền thuộc Website Thủ Thuật Hay Nhất © 2014 - 2015