Tạo nút trượt lên xuống cho blog

Tạo nút trượt bằng cách thêm tiện ích
Vào Thiết kế - Bố cục - Thêm tiện ích - HTML/Javarscrip dán đoạn code sau vào rồi lưu lại:
<script src='http://krdautocrazyblog.googlecode.com/files/Nut%20truot%20p%201.txt' type='text/javascript'></script><script src='http://krdautocrazyblog.googlecode.com/files/updown2%20%282%29.js' type='text/javascript'/></script>
Tạo nút trượt bằng cách chỉnh sửa HTML
Để 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.
Về cơ bản tiện ích này hoạt động tương tự như tiện ích Back To Top đơn giản và jQuery mà mình giới thiệu trước đây..
- Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, tầm 30x30 px), dùng để tạo 3 button : lên, xuống, và giữa.
Xem demo
Xem Demo
Ảnh minh họa:

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Chọn Phần tử trang (layout).
3- Chọn Thêm tiện ích => Chọn chỉnh sửa HTML
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/AVvXsEihB1jxdllKqtW11LCpJnPue-EYVZQcFGmF5-BWgPQvm6j9ZOxh3Kv46EtEzYPBlizl6Xug2huYc1UBecf25EjlVjYnW2X_WXUkRKBp6PuTmf6ILulqDmp08sVII0jb3FQzKRJpsHQwI5sM/s1600/top1010.png'/></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/AVvXsEhJPLE-NBjM8QSDJWU51CnDlFTNUSj1rUhSDjQlv1JH89p-Ci3KDlYLzuj5ZW8h5i1t2bM1o3r_c_X7VigG5WPOyc3lexxY-82rsK86xTSu5hR9DyCX_N4P7FkyeqFe0DwSSQeTkpZ6nSir/s1600/middle10.png'/></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/AVvXsEg0BJePe7vSAgSFOgqgQecmnBhRiWfXW0lRxQKAkK7he0cSpdvh9kh8FXhyRtyBOcASOFSrcSxCZTOw6TcKJuffzFyeHt_BhCBl6B3DH5q_p_9AAgfKGwI5Vv9QssgrcJCFDF_CoKu6Taga/s1600/bottom10.png'/></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

Hoặc vào ĐÂY