Metro Style Auto Blog Scroll 2nd Version For Blogger

5/27/2013 , 0 Comments

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>
#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>
And DoNe




Mack See

Some say he’s half man half fish, others say he’s more of a seventy/thirty split. Either way he’s a fishy bastard.

0 comments: