Để 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:
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/AVvXsEjjr12rY8x1AZs-yjUKtVECChgG0HycV2mMHnNvJDA6Ijlwjr-LpdOmo_GzvCFM4wzWZ2t7sg3q9UZrvcU0Uc88vePJYDyXV7wkDVh4qwn6Pq5U8VHzGh7CEHh9TttcBJRECqk7Xheskb4/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/AVvXsEiMpRoUayR44JZhGcnCMHfSzMPf5WUj1aqiVXmbk5DuChyphenhyphenw72LufwyKjSf2xo1MhFL93sjUnYL4y3bAQUmJMJL7ekxZX3AlzoWMPHFI2ePGD2YDqUlm2utZYzMJ0vdJ0fFurBq2t3k0u8c/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/AVvXsEjx-cJL-kIVzB03FqXlQwFbapsHIzXOP4bzjv8P-R97KZXBmiAQ3H8vIbMIg8X1HECrcBba4Dk02DQmehEiMZ-pl2Ji4T3NZ9d0leLW0cJxOPGI5JNdMmr5gVdYxxADYbPm82ljJh5nszs/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!
0 nhận xét:
Post a Comment