Metro Style Auto Blog Scroll 2nd Version For Blogger
This is the second version of the widget Auto Blog scroll in this version i changed the icons because they were kinda ugly but this time they are green and in hover they are red and in the older version it was vertical but in this version it is horizontal so lets continue to add it to blogger.
Install It Into Blogger
- Log into Blogger Dashboard
- Select Template
- Click Edit HTML
- Now Find with the help of CTRL + F the tag </body>
- And above it paste the following code and click Save.
<style>And DoNe.
#dp-scroll{position:fixed;z-index:9999;bottom:0;right:0}
#dp-scroll a{display:block;float:left;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRuCrWJiBGNnlQVmYGakEm8QeFTdmJ-TB8gjbcwu9lJ7QY0qslZqI_YSVAxrO26VlaUSUcrCBFATPscc3i_5MqB7PKwTBsNAZRcr1_VBku8RTi45phVyF4QX0Qhb10OEIRNyl_GU8AhFSg/s1600/scroll2.png);width:36px;height:36px;text-indent:-999em}
#dp-scroll a:hover.dp-top{background-position:35px 0px}
#dp-scroll a.dp-up{background-position:0 -36px}
#dp-scroll a:hover.dp-up{background-position:35px -36px}
#dp-scroll a.dp-down{background-position:0 -72px}
#dp-scroll a:hover.dp-down{background-position:35px -72px}
#dp-scroll a.dp-bottom{background-position:0 -108px}
#dp-scroll a:hover.dp-bottom{background-position:35px -108px}
#dp-scroll a.dp-scroll{background-position:0 -144px}
#dp-scroll a:hover.dp-scroll{background-position:35px -144px}
#dp-scroll a.dp-stop{background-position:0 -180px}
#dp-scroll a:hover.dp-stop{background-position:35px -180px}
</style>
<script>
function autoScroll(){window.scrollBy(0,1);scrolldelay=setTimeout('autoScroll()',50)}
function stopScroll(){clearTimeout(scrolldelay)}
</script>
<div id='dp-scroll'>
<a class='dp-top' href='javascript:window.scrollTo(0,0);' rel='nofollow' title='To Top'>To Top</a>
<a class='dp-up' href='javascript:window.scrollBy(0,-window.innerHeight);' rel='nofollow' title='Page Up'>Page Up</a>
<a class='dp-down' href='javascript:window.scrollBy(0,window.innerHeight);' rel='nofollow' title='Page Down'>Page Down</a>
<a class='dp-bottom' href='javascript:window.scrollTo(0,999999);' rel='nofollow' title='To Bottom'>To Bottom</a>
<a class='dp-scroll' href='javascript:autoScroll();' rel='nofollow' title='Auto Scroll'>Auto Scroll</a>
<a class='dp-stop' href='javascript:stopScroll();' rel='nofollow' title='Stop Scroll'>Stop Scroll</a>
</div>
0 comments: