Cara Memasang Auto Scroll Bar Di Blog

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

Cara Pemasangan

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode </body> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada 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/AVvXsEiBfncefif6W3a6sCJp5UooU9XyluP6PaZ60a3D6R_Kgh2RzA0NxcxrhVbhySk60cKAnX-gtGK0cCvEcrpUJnUvuKr1fTPEEFJGU33j9bvES03_sibCBI2CMgM6EruT5Qt_scId5jJZ_-dF/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(&#39;autoScroll()&#39;,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>

• Step 5  Ubah kode left dengan right untuk memindahkan widget ke pojok kanan blog anda
• Step 6  Ubah kode #0000FF untuk mengubah background/latar widget
Kode Warna
• Step 7  Ubah kode #ffffFF untuk mengubah background/latar saat ada mouse diatas widget ini
• Step 8  pratinjau,jika sudah pas klik simpan

Jika anda berpikir widget back to top  ini kurang sesuai dengan tampilan blog anda,jangan khawatir kami sudah menyediakan beragam widget back to top lainnya( Klik Disini )


jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.