Add awesome Auto Scrollbar Widget into your Blogger Template

Add awesome Auto Scrollbar Widget into your Blogger template

Comments: 2
back to top

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 Starts-->
#bsautoscroll a{display:block;float:left;background-color:#CC0099;background-image:url(;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}
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout(&#39;autoScroll()&#39;,50)}
function stopScroll(){clearTimeout(scrolldelay)}
<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>
<!-- End of Auto Blog Scroll Widget by- -->


  • 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.

Related Post

Speak Your Mind

Anonymous 5/25/2013

really awesome.. especially play and pause

Ranjot Dhillon says: 6/05/2013
This comment has been removed by the author.
Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *