Hôm nay mình sẽ hướng dẫn các bạn cách tạo các nút mà khi bấm vào thì sẽ nhảy đến vị trí đã được định sẵn.
Thủ thuật này giúp khách xem trang lướt web (blog) của ta nhanh hơn,họ đỡ phải kéo các thanh trượt một cách chán nản khi mà bài viết của ta quá dài.
Để cho đẹp hơn, ta nên tạo nút bằng hình ảnh.
Đầu tiên bạn phải có 3 tấm hình (nhỏ thôi, cỡ khoảng 30*30 px hay 40*40 là ok rồi), mục đích dùng để tạo 3 nút bấm : lên, xuống, và giữa.
thủ thuật gồm 4 bước cũng khá đơn giản
1. Đăng nhập vào blog
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code bên dưới vào trước đọan code ]]></b:skin>
(cách tìm code nhanh và lẹ khi trong một rừng code mù mịt : đặt trỏ chuột vào trong khung chứa code à nhấn tổ hợp phím ctrl + F à nhìn lên góc phải màn hình phía trên cùng sẽ thấy xuất hiện khung nho nhỏ à gõ đoạn này vào ]]></b:skin> à nhìn xuống lại khung chứa code bạn sẽ thấy nó được bôi màu,rất dễ phải không nào,nhưng nếu không biết mà tự tìm thì cả ngày đấy hihi )
2. Vào chỉnh sửa Code HTML
3. Chèn đọan code bên dưới vào trước đọan code ]]></b:skin>
(cách tìm code nhanh và lẹ khi trong một rừng code mù mịt : đặt trỏ chuột vào trong khung chứa code à nhấn tổ hợp phím ctrl + F à nhìn lên góc phải màn hình phía trên cùng sẽ thấy xuất hiện khung nho nhỏ à gõ đoạn này vào ]]></b:skin> à nhìn xuống lại khung chứa code bạn sẽ thấy nó được bôi màu,rất dễ phải không nào,nhưng nếu không biết mà tự tìm thì cả ngày đấy hihi )
#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);
}
- bottom:5px; , right:5px; : 2 đoạn code này để xác định vị trí hiển thị của các button trên màn hình.
4. Chèn đọan code sau vào trước thẻ đóng </body>
<div id='top-buttom_image'>
<a href='javascript:scroll(0,0)' title='Lên đầu trang'><img src='{url ảnh}'/></a><br/>
<a href='javascript:scroll(0,9999999)' title='Xuống cuối trang'><img src='{url ảnh}'/></a>
</div>
- Thay code {url ảnh} thành địa chỉ URL của ảnh mà bạn muốn hiển thị.
Chú ý: ở lệnh javascript:scroll(0,9999999) số 9999999 đặt càng lớn càn tốt, nếu đặt nhỏ quá, đối với những trang dài, nó sẽ không nhảy đến cuối trang được.
Thêm button nhảy vào giữa trang
-ở phần này dành cho bạn nào muốn có cả 3 nút “lên đầu” , “vào giữa” và “xuống cuối” thì làm như bên dưới đây
- các bước 1 , 2 ,3 tương tự như trên, chỉ thay đổi code ở bước 4 thành đoạn code bên dưới:
<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 src='{url ảnh1}'/></a><br/>
<a href='javascript:window.scrollTo(maxWidth,maxHeight/2)' title='Vào giữa trang'><img src='{url ảnh2}'/></a><br/>
<a href='javascript:window.scrollTo(maxWidth,maxHeight)' title='Xuống cuối trang'><img src='{url ảnh3}'/></a>
</div>
xong lưu lại thướng thức thành quả !
*các bạn có thể dung ảnh các bạn thích,hoặc dung những ảnh mình cung cấp tại đây : http://www.tuyetchieudoc.co.cc/p/upload-anh.html
Các bạn vào trang này và bấm phải chuột lên ảnh chọn coppy link address hoặc coppy image url
Rồi dán url vào hướng dẫn trên.
-các bạn cũng có thể thay các dòng chữ “lên đầu trang” , “xuống cuối trang” hay “vào giữa trang” bằng dòng chữ của các bạn nhé ! đây là chữ sẽ xuất hiện khi bạn rê chuột vào ảnh.
Chúc các bạn thành công !
