Thanh điều khiển cuộn trang góc màn hình cho blogspot - Trang Tin tức - Giải trí - Thủ thuật tổng hợp - Download tài liệu - Game cho người Việt

Breaking

Business

BANNER 728X90

Tuesday, January 14, 2014

Thanh điều khiển cuộn trang góc màn hình cho blogspot

Trong quá trình duyệt web hẳn mọi người thường dùng chuột giữa để cuộn trang, hoặc có ai như mình cài Synaptics Touchpad để cuộn trang theo kiểu xoắn ốc rất tiện dụng? Tuy nhiên 4 phím chức năng: Home, Page Up, Page Down và End sẽ giúp ngón tay bớt thao tác hơn, nhất là khi đọc những đoạn văn dài. Mình sẽ hướng dẫn các bạn mang 4 chức năng này vào blog và được điều khiển bằng bấm chuột - Thanh điều khiển cuộn trang góc màn hình cho blogspot, ngoài ra còn có thêm chức năng cuộn trang tự động rất tiện dụng cho khách đọc ở blog chuyên về truyện. 
Các bước thực hiện :

 1. Đăng nhập blogger
2. Chọn mẫu--> Chỉnh sửa HTML

3. Thêm đoạn mã dưới đây vào trước thẻ </body> trong template của bạn.
<style>
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-color:#5cd4f5;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc2c2VmBNXMp3kWJsjmxmf7BaWE9tgwJ4OQ0qzBIFqE6f8SNb4JzOe9y7SKJjvHq3G8FYFqMzFFnbzhdDvQnvdmPjcst8uSAcGqpiEASX_rARZEe86L7QfPenbbTGKNEC8M7sLNcNTibk/s216/scroll.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover{background-color:#5cbbf5}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>  
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
4. Lưu lại và xem kết quả
Chúc các bạn thành công !

No comments:

Post a Comment