Membuat Panel Kontrol Scrollbar di Blogger

Unknown

Widget

26 Jan 2014

12 Komentar

Membuat Panel Kontrol Scrollbar di Blogger - Bagi sebagian orang setidaknya untuk menambahkan fungsi kontrol hanya menggunakan tombol Back to Top/Kembali ke Atas, nah pada artikel ini saya buatkan sebuah panel kontrol untuk scrollbar yang lebih bervarian. Diantaranya ada 6 tombol fungsi sekaligus, yaitu Back to Top, Page up, Page down, To Bottom, Auto Scroll, dan Stop Scroll.

JavaScript

<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/AVvXsEgArsH4S9AbEUDr2Nmc5V5u0Yfe2fqbNU77sNriXkS6bk-MMJwcsLFHXqyoL0PO6r082JjpbcJiP3bLSjxM3KauuzZF_bGvzbLxQyESdILhPpC6Nc73d0sPK2ObtPRI9smbmhHqm_ksIrQ/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>

• Demo

Angka 50 untuk mengurangi atau menambah kecepatan auto-scrolling halaman.

Terakhir SAVE Template..

Semoga bermanfaat..

Sumber kode : http://blog.duypham.info/2013/05/thanh-dieu-khien-cuon-trang-cho-blog.html