post

Today I am going to show you how you can add an Auto Scroll Widget to blogger. The main concept of the widget is too simple. The page sta...

Today I am going to show you how you can add an Auto Scroll Widget to blogger. The main concept of the widget is too simple. The page starts scrolling itself when the play button is pressed and the scrolling stops once he pause button is pressed. The scrolling speed can be adjusted which I will show you how to do it below. The scrolling speed can also be increased my clicking more than one time on the play button.

• Login to  blogger account and copy the code
• Go to  Theme  >  Edit HTML

• Press Ctrl + F and click anywhere inside the template editor
• Type </body> in the search box and press enter key
• Now just above the </body> paste the code and click Save template.

<style>
#scroll{position:fixed;z-index:9999;bottom:0;left:10px;top:380px!important;}
#scroll a{display:block;float:none;width:32px;height:32px;text-indent:-999em; padding: 3px!important;}
#scroll a.scroll{font-family:FontAwesome;border-radius:50%;}
#scroll a.stop{font-family:FontAwesome;margin-left:2px;border-radius:50%;}
#scroll a.stop{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkcDQ-aqnHA5Xs3LxGH8ILqzwUmJ1CJt5zrw0IeuvMGbm2CeRs4bLXay8Vo1lgttBSEaMcm8oaDiiwTL8usBo3LWjPds9OB0iaXpDrI5FIxKwqcZzSvEhgZhScl0KRq_UYHYEuaqXx13KJ/s1600/pause.png");}
  #scroll a.scroll{width:33px;height:33px;!important;}
 #scroll a.stop{width:34px;height:34px;}
#scroll a.scroll{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4evgntNDeVcv6_fApcS-fdPIhnTq4_tP9XJV8m3TZaCqOHf_eISCsIKzn5DowWndlU8Cogl06wdHCRnfIXPOP6lQTUU4wtUXpnT9RIA5aR3jOEF7HsyXry4Ql_xPHLw4FQ0tHmxs4oAS/s1600/play.png");}
</style>
<script type="text/javascript">
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',80)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id="scroll">
<a class="scroll" href="javascript:autoScroll();" rel="nofollow" title="Play">Play</a>
<a class="stop" href="javascript:stopScroll();" rel="nofollow" title="Pause">Pause</a>
</div>