How to add automatic Scroll widget in Blogger

 

Activating a page scrollbar widget on your website or web pages can be an amazing improvement to the usability and functionality of your website, because it will help any visitors to read everything on your site with just a click.

Visitors who just want to check round your website or web pages can always do that with ease with just a click all pages on your website keep playing like a video, and you’ll continue watching as you read along, but this doesn’t stop you from controlling the page with your hand even though the page scrollbar is still active, if there is there is anything you want to be sure you read well and understand, but if not then you may leave the page to continue scrolling while you enjoy your reading with no hassles. The most sweet part of this is that you can make it active across your websites by just embedding a Snippet / code in the HTML of your website, so if you are ready to make a page Automatic scrollbar active on your website pages all you need do is to follow simple steps to of copying and pasting method (I’m about to share with you) to implement it. Let’s do it now!!!

First Step: Copy the Code below and Paste it right above the closing </body> in the HTML of your website. See the screenshot below for a clearer illustration.

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

FYI: You can change two things in the snippet. The first is the corner you like it to be, either Right or Left. The default is placed on the left side, so the scrollbar will show on the left side of your website. If you want your own to be on the Right side, just change the left written in blue color to right.

 The second thing you may change is percentage which represents the rate of the speed at which you want the Scroller to move whenever it’s activated, but I think you don’t need that because each reader can always make it faster than the default setting by tapping the Scroller twice or thrice and may even reduce the speed by tapping the pause sign. But the only thing you must do to stop or reduce the Scrolling is to make sure you tap the pause also twice if you have tapped play twice before and it will stop or reduce the speed to your suit. 

But if you still wish to change it, then you need to change the default 30% (in red color) to whatever you want, that’s all. You can save the theme.

I hope you should know how to do this already if you’ve been editing your website’s HTML before but if this will be your first time or you do not understand what I mean by the closing </body> in the HTML of your website, then you can read further to know how to paste the code.

#1. Go to your blogger darsboard, and click on the three lines at the top on your left corner.

#2. Scroll down a little and click on Theme.

#3.  Click on the down pointing  arrow on the red button next to your current Theme.

#4.  Click on Edit HTML

#5. Scroll to the bottom of the HTML, you’ll see the closing </body>, paste the code above it and click save.

You should see it active on your website in immediately or latest in less than 10 seconds.

Note: If you are using Android phone like me, for you to save the HTML. Click on the three dots on your right corner of the screen head of the page, and click on save. It’s that simple.

Thanks for reading.