970x90

Cách tạo thanh điều khiển cuộn trang cho Blogger
Cách tạo thanh điều khiển cuộn trang cho Blogger

Hôm nay, THỦ THUẬT TRÊN BLOGSPOT xin chia sẽ bài viết:
"Cách tạo thanh điều khiển cuộn trang 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ũng có người 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.

THỦ THUẬT TRÊN BLOGSPOT sẽ hướng dẫn các bạn mang 4 chức năng này vào Blogspot và được điều khiển bằng bấm chuột, 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ề tiểu thuyết chẳng hạn. 



Bây giờ ta bắt đầu thực hiện các bước sau:

Mẫu > Tùy Chỉnh HTML > Chỉnh Sữa Mẫu

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://lh6.googleusercontent.com/-2arFa25w0bc/UwoOP0XSNOI/AAAAAAAAAWk/hbv-UThMtZs/w40-h238-no/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>

Đăng nhận xét

Nguyễn Duy Giang

{picture#https://1.bp.blogspot.com/-g9yBlmBaTqE/WrjioUbUeRI/AAAAAAAAkog/Bz6Nhx7FvOwb0F9nFWJ1tPPtaZLiTWfJwCLcBGAs/s1600/nguyen-duy-giang.png} GIỚI THIỆU VỀ TÔI {facebook#https://www.facebook.com/ernestonguyengiang} {twitter#https://twitter.com/duygiangnguyen} {google#https://plus.google.com/u/1/+NguyenDuyGiang} {pinterest#https://www.pinterest.com/nguyenduygiang/} {youtube#https://youtube.com/nguyenduygiang} {instagram#https://www.instagram.com/nguyenduygiang/}
Được tạo bởi Blogger.