Tạo nút bấm nhảy xuống cuối trang, lên đầu trang



Để tiện cho việc người khác lướt blog(web) của mình, các bạn có thể tạo các nút nhảy lên đầu trang, nhảy xuống cuối trang , hoặc nhảy vào giữa trang. Bài viết này mình sẽ hướng dẫn các bạn thực hiển nó. Để cho sinh động, ta nên tạo nút bằng hình ảnh.
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Chọn Phầnt ử trang (layout).
3- Chọn Thêm tiện ích => Chọn thêm 1 tiện ích HTML/Javarscip
4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>.

    #top-buttom_image {
    position:fixed;
    _position:absolute;
    bottom:5px;
    right:5px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight);
    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}

-Trong đó:
  • bottom:5px; là vị trí ảnh tính từ phía chân màn hình tính lên. Nếu muốn tính từ trên đầu thì thay bottom thành top
  • right:5px; : Là vị trí của ảnh so với lề phải. Bạn có thể thay right thành left để căn lề trái

5- Chèn đọan code sau vào trước thẻ đóng </body>
<script type='text/javascript'>
    var maxWidth = (document.body.clientWidth);
    var maxHeight = (document.body.clientHeight);
    </script>

    <div id='top-buttom_image'>
 
   <a href='javascript:top.window.scrollTo(0,0)' title='Lên đầu 
trang'><img alt='Lên đầu trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoM7TM2UswwjjpI7Y8MCqcAg1UpWheNvsKqTA_glTa2xGaEZww4p8OS9baPRk0RIabMDG_qZIHNZidnGrxsF0aX4ummsoHvkrN23raGEFxnJPxdJBvv8J_bspdpo4iulnFuo9bV-dSZ1E/s1600/top-namkna-blogspot-com.gif'/></a><br/>

    <a 
href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa 
trang'><img alt='Vào giữa trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKXJoC7lZQpQ48rK60el7Drt5yAY_PfK2NKwWQb3X0wQPvy91-uWLT8G78oB-reCVxTLaOYv9ywltbh3UsdOGkHEi9d6YzcIwRX9EJjQk9_JYqmydU3eapf81KHg-OQj-oOT0AlQFvzw/s1600/play-pause-namkna-blogspot-com.gif'/></a><br/>

    <a 
href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối 
trang'><img alt='Xuống cuối trang' border='2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5aResyNo-61bTHpHe-NWLguaSgtOP1JchC3cWozWXhkBif68r9S2D3H3VzgDhdTJKQjcedWoI_lS4nRSaDOHiU5Oo3GMxLU8-e1dTpQ6dw5bAoX1rAypbrLgNck0wKolT_Pl87kblic/s1600/bottom-namkna-blogspot-com.gif'/></a>
    </div>
Thay link ảnh bằng link ảnh của các button Các bạn VÀO ĐÂY để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào

5- Sau đó bấm Lưu Mẫu lại.
6- Một số link ảnh

 
Chúc bạn thành công!


Lên đầu trang
Vào giữa trang
Xuống cuối trang

.Created by LÊ TRẦN LONG
  • Bài đăng
  • Nhận xét
  • Lượt xem

Label

Ajax (1) Android (7) App (10) Auto Read More (1) Bitcoin (2) Blogger (39) Breadcrumbs (2) Button (5) Chrome (3) CSS (12) Effect (4) Embed (1) Excel (6) Facebook (6) Google (31) Host (1) HTML5 (5) Image (2) Internet (32) Javascript (5) jQuery (3) Label (3) Menu (2) Office (27) PC (49) Photoshop (8) Plugin (2) Post (7) PowerPoint (2) Scroll (2) SEO (18) Sitemap (4) Templates (7) Widget (9) Word (3) Youtube (7)