Every blogger want to make their blog Viewer Friendly. Isn't it? There are several widget created which can make your blog easy to browse contents which you post in to your blog. Now a days blog with good content and nice design can only attract same niches reader. In my previous posts i've shared some really cool widgets which can help you to make your blog User Friendly. In this post too i'm here with a unique widget named "Auto Blog Scroll Bar", As it's name it will auto scroll your blogs page as well as it will work like Go to Top and Go to Button also. You can determine the scrolling speed as you wish. Let's have a demo of Auto Blog Scroll Bar and be ready to add it to your blog.Let's Check how this widget work.
How to add it blogger?
It is very simple to add this widget. Sign in To your Blogger account>>Nevigate to Your Blog>>Click On Template and Edit HTML>>Find </body> ( Use Ctrl+F ) Just add the following code above </body>.
<style> #pokharatech-scroll{position:fixed;z-index:9999;bottom:0;left:0} #pokharatech-scroll a{display:block;float:left;background-color:transparent;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYaDdqHoIUyff2zKH97sHeKEuW8PUkv-ss8UgqN8E4KIBJUQCzC7aHQUl27KohSf6IkYhWjHZ0U5P2GmGwOAm6R9eoIGHiVgCYJ9TGy43LXQcGoIL747F9m1YAPeGibkNm6y6TSarQyg8/s216/scroll.png);width:36px;height:36px;text-indent:-999em} #pokharatech-scroll a.pokharatech-up{background-position:0 -36px} #pokharatech-scroll a.pokharatech-down{background-position:0 -72px} #pokharatech-scroll a.pokharatech-bottom{background-position:0 -108px} #pokharatech-scroll a.pokharatech-scroll{background-position:0 -144px} #pokharatech-scroll a.pokharatech-stop{background-position:0 -180px} #pokharatech-scroll a:hover{background-color:#a00202} </style> <script> function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)} function stopScroll(){clearTimeout(scrolldelay)} </script> <div id='pokharatech-scroll'> <a class='pokharatech-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a> <a class='pokharatech-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a> <a class='pokharatech-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a> <a class='pokharatech-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a> <a class='pokharatech-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a> <a class='pokharatech-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a> </div>
Costomization
If you want to decrease or increase page scroll time kindly change 50 with your auto-scroll time.
Now Save Template. That's It. Now You are Done.
How is this widget? I'm Sure that you've love this widget. If you found any bugs or if you got any problem during the adding process of this widget please let me know via comment box below. I will be here with more awesome widget/tips/tricks and templates, be with PokharaTech. Peace, Happy Blogging.
0 Comments