November 27, 2017

Hướng Dẫn Tạo Nút Lên Đầu Trang Cho Blogger

Nêu các bạn nào đã sỡ hữu một blogger với giao diện nhẹ phải xóa bớt script hoặc bài viết với nội dung dài thì các bạn cần phải có nút lên đầu trang để đọc giả đỡ phải cuông chuột lên để chọn vào các bài viết khác hoặc chọn các tiêu đề khác thì rất phiền phức. Vì vậy hôm StarManh.Net sẽ chia sẽ cho các bạn code lên đầu trang hoàn toàn miễn phí với 2 code sau đây.
Code 1: sử dụng code bằng css điều này sẽ giúp cho blog của bạn load nhanh hơn 1 tý nó sẽ cố định không có đẹp như sử dụng javascript
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://sv1.upsieutoc.com/2017/11/27/Top.png"/></a>  
Code 2: sử dụng javascript code nay thì sẽ có hiệu ứng mờ đi và có thể đẹp hơn tùy theo cách nhìn của mỗi người thôi :)
<script type='text/javascript'>
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() != 0) {
                $("#noop-top").
                fadeIn()
            } else {
                $("#noop-top").fadeOut()
            }
        });
        $("#noop-top").
        click(function() {
            $("body,html").animate({
                scrollTop: 0
            }, 800);
            return false
        })
    });
</script>
<a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='http://sv1.upsieutoc.com/2017/11/27/Top.png'/></a>
Hướng dẫn cách sử dụng:
cac bạn có thể thay thế icon nút lên đầu trang với các hình ảnh dưới đây bằng thay thế link "sv1.upsieutoc.com/2017/11/27/Top.png" 
khi đã chọn được icon lên đầu trang mà mình thích thì các bạn chỉ cần thêm code vào blog của mình bằng cách sau. Các bạn vào phần Bố cục > Thêm tiện ít >  HTML/Javascript xong các bạn dán code mình đã chỉnh sẽ lại icon nút lên đầu trang và lưu lại thế là xong.
Lời Kết
Code trên dễ dàng sử dụng giao diện đẹp và nhẹ các bạn nào không biết về lập trình cũng có thể sử dụng một cách dễ dàng. 
- Chúc Các Bạn Thành Công !  

No comments:

Post a Comment