Thêm hộp back top/down cực đẹp cho Blogger

Ngồi rảnh không biết làm gì nên viết bài chia sẻ cho anh em hộp Back top/down cho Blogger.
Thôi không luyên tha luyên thuyên nữa, bắt tay vào làm nào!

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Đăng nhập vào Blogger rồi vào mục Chủ đề -> Chỉnh sửa HTML
Bước 2: Tìm thẻ </body> và dán đoạn code bên dưới lên trên thẻ vừa tìm được

<!-- Back -->
<div class='back-top' title='Back to Top'><i aria-hidden='true' class='fa fa-arrow-up'/></div>
<div class='back-bottom' title='Back to Bottom'><a href='#down'><i aria-hidden='true' class='fa fa-arrow-down'/></a></div>
<script type='text/javascript'>
 $('.back-bottom').click(function(){$('html,body').animate({scrollTop:$("#credit").offset().top},1000);});
    $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
            $(".back-top").css({
                bottom: "110px"
            });
        } else {
            $(".back-top").css({
                bottom: "70px"
            });
        }
    });
    $(".back-top").click(function() {
        $("html, body").animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
</script>
<script type='text/javascript'>
<script type='text/javascript'>
 $(&#39;.back-bottom&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:$(&quot;#down&quot;).offset().top},1000);});
</script>

Bước 2: Để làm đẹp cho đoạn code này bạn cần sử dụng đoạn CSS sau và dán lên phía trên thẻ ]]></b:skin>

/* Back top/down */
.back-top{z-index:500;width:40px;height:40px;position:fixed;bottom:-100px;right:8px;cursor:pointer;overflow:hidden;font-size:18px;background-color:#7f939d;color:#fff;text-align:center;line-height:38px;border-radius:3px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);opacity:.9}
.back-bottom{z-index:500;width:40px;height:40px;position:fixed;bottom:7px;right:55px;cursor:pointer;overflow:hidden;font-size:18px;background-color:#7f939d;color:#fff;text-align:center;line-height:40px;border-radius:3px;transition:all .3s ease;box-shadow: 0 2px 4px rgba(34,36,38,0.35);opacity:.9}
.back-top a,.back-bottom a{color:#fff}
.back-top:hover,.back-bottom:hover{background-color:#0EB1F0}

Như vậy là blogger các bạn sẽ trông đẹp và chuyên nghiệp hơn. Chúc các bạn thành công! Hiuhiu

Share this post