Assalamualaikum wr.wb. Kali ini saya share tentang
cara menambahkan auto scroll bar di blog. Apasih gunanya auto scroll bar ini ? fungsi dari auto scroll bar ini mirip dengan fungsi dari widget
back to top yaitu agar visitor tidak perlu jauh-jauh mengscroll blog anda cukup memilih salah satu tombol pada widget ini maka visitor dapat kembali keatas,turun ke bawah,scroll otomatis dan menghentikan scroll otomatis
Lalu,apa bedanya widget ini dengan widget back to top ?.Perbedaannya cukup jelas karena back to top hanya membantu kita untuk naik ke "puncak" blog kita sedangkan,widget auto scroll bar ini memiliki 6 fitur berbeda untuk mengscroll blog kita
Bisa kita liat pada gambar diatas bahwa terdapat 6 simbol yang memiliki 6 fungsi berbeda yaitu :
- to top : sama seperti widget back to top yaitu naik ke "puncak" blog
- page up : naik ke atas ,perbedaannya adalah ia tidak sampai ke puncak hanya ke laman atas
- page down : kebalikan page up
- to bottom : kebalikan to top,sehingga ia akan membawa kita ke "dasar" blog kita
- auto scroll : page secara otomatis turun secara perlahan-lahan
- stop scroll : menghentikan page yang sedang turun karena auto scroll
Sekarang saatnya praktek,ikuti langkah-langkah berikut ini
1.buka blogger > blog anda
2.template > edit html
3. cari kode </body> (gunakan CTRL + F )
4. pasang kode dibawah ini diatas kode </body> tadi
<style>
#bsautoscroll{position:fixed;z-index:9999;bottom:0;left:0}
#bsautoscroll a{display:block;float:left;background-color:#0000FF;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmR-f5k3ZU6BtQ_rTzaq89j0h7RQ2H3h4g_0prfBTUYfkyiZaQ9eKSCnFkNWep9g5VfaZLPQe3n6iM3i50bn3rvtPcJXBi6FEdJGS9vLto13X_jlbU0IOx7Pwi7JFdm4O91kWWWfAtHd67/s1600/BS+Auto+Scroll.png);width:36px;height:36px;text-indent:-999em}
#bsautoscroll a.bsup{background-position:0 -36px}
#bsautoscroll a.bsdown{background-position:0 -72px}
#bsautoscroll a.bsbottom{background-position:0 -108px}
#bsautoscroll a.bsautoscroll{background-position:0 -144px}
#bsautoscroll a.bsstop{background-position:0 -180px}
#bsautoscroll a:hover{background-color:#ffffFF}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='bsautoscroll'>
<a class='bstop' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='bsup' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='bsdown' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='bsbottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='bsautoscroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='bsstop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
5. ubah kode
left dengan right untuk memindahkan widget ke pojok kanan blog anda
6. ubah kode
#0000FF untuk mengubah background/latar widget
7.ubah kode
#ffffFF untuk mengubah background/latar saat ada mouse diatas widget ini
8.pratinjau,jika sudah pas klik simpan
jika ada yang ingin agan tanyakan silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.
