Sunday, 8 September 2013

Auto Scroll to Top 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.

<<<<<****************************************************************>>>>>

We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here and directly ask the developer of this Widget for the Solution by Commenting there.