Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

close
26 Jan 2014

Membuat Panel Kontrol Scrollbar di Blogger

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.

Panel Kontrol Scrollbar di Blogger

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(http://lh5.ggpht.com/-wREw7V6WEsg/UYQq0-d5cWI/AAAAAAAABsI/vnH-wGlJp6s/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>


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

12 Komentar

boleh juga nih gan hilbram,. hehe
coba pakai ah,. hehe

hihi yap sudah dipasang gan hilbram,. hehe lumayan..
thanks info nya, n minta izin bookmark hehe, kalau ada yang nanya jadi bisa di posting ,hehe, n tenang aja, saya suka cantumkan sumber nya,. hihi

Wuihh, jadi lengkap nih scrollnya. mantap gan artikelnya

Kunjungan perdana Gan....
Keren nich boleh juga kalo di coba :)

Silahkan di bookmark gan..
Mantap :-bd

hehehe biar keren dan bervariasi gan.. :-d
Makasih.. :)

kunjungan perdana gan, menarik sekali gan bisa menambah menarik variasi blog kita. :)

Terima kasih gan dan salam kenal..
Hehehe betul, agar visitor dipermudah untuk lebih leluasa mengontrol scrolling blog kita.. :)

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
 
notifikasi
Tutup