[Hướng dẫn] Tạo nút "Go to top" cho Blogspot

Một số theme của blogger không có nút Go to top khiến bạn thấy thiếu, vậy làm thế nào để tạo nút Go to top? Hôm nay mình sẽ hướng dẫn cách làm cho những ai cần!

1. Bạn vào phần Template

2. Chọn Edit HTML

3. Bấm phím tổ hợp Ctrl+F và gõ <head>
--- Thêm ở dưới thẻ Head đoạn code sau
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript' />

Bạn sẽ được như sau

4. Tiếp theo bạn bấm phím tổ hợp Ctrl+F và gõ </body>
--- Thêm ở dưới thẻ /body đoạn code sau

<style>
.ks-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 15px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class='ks-back-to-top' src='http://i.imgur.com/iKERKsr.jpg'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() &gt; offset) {
            jQuery(&#39;.ks-back-to-top&#39;).fadeIn(duration);
        } else { //www.crawlist.blogspot.com
            jQuery(&#39;.ks-back-to-top&#39;).fadeOut(duration);
        }
    });
    jQuery(&#39;.ks-back-to-top&#39;).click(function(event) {
        event.preventDefault();
        jQuery(&#39;html, body&#39;).animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

 --- Bạn sẽ được như sau

[Hướng dẫn] Tạo nút "Go to top" cho Blogspot [Hướng dẫn] Tạo nút "Go to top" cho Blogspot Reviewed by Unknown on 4:38 PM Rating: 5

No comments:

ads
Powered by Blogger.