Add awesome Auto Scrollbar Widget into your Blogger Template

Add awesome Auto Scrollbar Widget into your Blogger template

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.

Post a Comment

really awesome.. especially play and pause

This comment has been removed by the author.
Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *