Auto Scroll Widget for Blogger

Posted On // 16 comments


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

Anonymous Author
30 May 2013 at 15:30

how to make this widget right middle

Reply
30 May 2013 at 20:09

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}

Reply
joe satria Author
30 May 2013 at 22:54

thank you 4 attention, i uset this widget on blog

Reply
21 July 2013 at 20:17

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

Reply
siddhu Author
15 August 2013 at 02:46

Thanks a lot its works man.

Reply
Anonymous Author
18 August 2013 at 22:44

hi

Reply
Anonymous Author
21 August 2013 at 07:32

CAN I ADD THIS CODE IN POSTS PAGE????
pleazeee!!!



(turkey - O.T)

Reply
21 August 2013 at 07:54

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

Reply
21 August 2013 at 07:56

Ofcourse it would.

Reply
Rajesh Kuchan Author
15 October 2013 at 17:51

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

Reply
Rajesh Kuchan Author
15 October 2013 at 17:51

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

Reply
Chiru V Author
21 November 2013 at 13:43

You are a genius..

Reply
niraj lathiya Author
23 January 2014 at 04:58

Really u r genius

Reply
28 June 2014 at 23:57

its work on twitter timeline wigdet auto scroll ?

Reply
Fork Cent Author
15 January 2015 at 22:33

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

Reply
20 February 2016 at 20:16

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

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Auto Scroll Widget for Blogger |