Auto Scroll Widget for Blogger



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.

The demo of this widget can be seen on the right bottom of this page.
Once you have seen the demo you can now proceed and add this widget to your own Blogger blog. Follow the below given steps to add this Auto Scroll Widget to your blog.

Adding the HTML/CSS/JS

First of all go to Blog Title → Template → Edit HTML and add the below given code just above of </body>

<style type='text/css'>
#abt-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#abt-scroll a{display:block;float:left;width:32px;height:32px;text-indent:-999em; padding: 3px}
#abt-scroll a.abt-scroll{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/play-button.png) no-repeat}
#abt-scroll a.abt-stop{background: url(https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/Images/pause-button.png) no-repeat}
#abt-scroll a:hover{background-color:#1569C7}
</style>
<script type='text/javascript'>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='abt-scroll'>
<a class='abt-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='abt-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>



Setting up Scroll Speed

Change 50 with your desired number to increase/decrease scroll speed. Save the Template

You are done now. Now you and your visitors can see and use this auto scroll feature of your blog.

16 comments:

  1. how to make this widget right middle

    ReplyDelete
  2. To make this widget in right middle, change this code -

    #abt-scroll{position:fixed;z-index:9999;bottom:0;right:0}

    TO

    #abt-scroll{position:fixed;z-index:9999;bottom: 350px;;right:0}

    ReplyDelete
  3. thank you 4 attention, i uset this widget on blog

    ReplyDelete
  4. Hey Dhiraj can i add this code in any posts html page ..would it work fine ?

    ReplyDelete
  5. Thanks a lot its works man.

    ReplyDelete
  6. CAN I ADD THIS CODE IN POSTS PAGE????
    pleazeee!!!



    (turkey - O.T)

    ReplyDelete
    Replies
    1. OK You can but do mention the source i.e. this URL.

      Delete
    2. Dude it also apply for post ... add it, play it, enjoy it .... !!!

      Delete
  7. awesome yaaar ek dum wesome ... dhiraj bhai ur rocking .....

    ReplyDelete
  8. its work on twitter timeline wigdet auto scroll ?

    ReplyDelete
  9. I added this code above body tag but it shows your sitemap in the footer nothing else shows. . .

    ReplyDelete
  10. hey i try but its not working, plzz suggest in my site ie: http://www.firstoccupation.com/

    ReplyDelete