Add awesome Auto Scrollbar Widget into your Blogger Template

Generally we use Back-to-top widget to make easy to go to top. But This features work only for to go top. But I have designed a widget which will help you to scroll to top, bottom and even you can set as auto scroll option. After hit on auto scroll option your blog will be scroll down slowly and a readers can easily read the blog without manually use of mouse wheel. So I think this widget will make your browser more user friendly and your visitors will love to use it. OK let's go to tutorial that how to add this widget into your template.

Live Demo

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on ->Template -> Edit HTML

Step 3 Now Find this code </body>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </body>

<!--Auto Blog Scroll Widget by www.bloggerspice.com Starts-->
<style>
#bsautoscroll{position:fixed;z-index:9999;bottom:0;right:0}
#bsautoscroll a{display:block;float:left;background-color:#CC0099;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJeuifxT__ZCukU5ZNk_yBHSUXZBNSU1e7dCbgONXUCunOdbuXADj7SiAPAFIAQGOG9IYR1-gNdir-uJ0QCDUzzpI1Rrip4e-7AAshzPfGo4a8v9OCUM5cXEKFGWF0xBmZ4iPLZiKhOJEm/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:#8E006B}
</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>
<!-- End of Auto Blog Scroll Widget by- http://www.bloggerspice.com -->

Customization

• Alter left to right for aligning the widget into right side
• Change CC0099 with different color code to change the background. You can get color code from Here.