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
31 May 2013 at 04:00

how to make this widget right middle

Reply
31 May 2013 at 08:39

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
31 May 2013 at 11:24

thank you 4 attention, i uset this widget on blog

Reply
22 July 2013 at 08:47

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

Reply
siddhu Author
15 August 2013 at 15:16

Thanks a lot its works man.

Reply
Anonymous Author
19 August 2013 at 11:14

hi

Reply
Anonymous Author
21 August 2013 at 20:02

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



(turkey - O.T)

Reply
21 August 2013 at 20:24

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

Reply
21 August 2013 at 20:26

Ofcourse it would.

Reply
Rajesh Kuchan Author
16 October 2013 at 06:21

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

Reply
Rajesh Kuchan Author
16 October 2013 at 06:21

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

Reply
Chiru V Author
22 November 2013 at 03:13

You are a genius..

Reply
niraj lathiya Author
23 January 2014 at 18:28

Really u r genius

Reply
29 June 2014 at 12:27

its work on twitter timeline wigdet auto scroll ?

Reply
Fork Cent Author
16 January 2015 at 12:03

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

Reply
21 February 2016 at 09:46

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 |