Scroll to Top Button {or hours of free fun!}

So if you scroll down this page you'll see a black up arrow appear. Its a scroll to the top button! I'm so excited! I may or may not have spent 10 minutes playing with it as soon as I got it installed.

Want to know how I got it? Well I was partying over at The Sundae Scoop at I {Heart} Nap Time and I came across this link from Courtney over at Between U & Me. After playing around with the button on her blog, {Yes, I have spent at least 20 minutes playing with these buttons. No, I didn't get enough sleep last night!} I just knew I needed one for myself.

Courtney posted a great tutorial. However, I'm really new {nice word for dense} when it comes to this blog editing stuff. So, I wanted to share the instructions that made sense to me.

1. Go to your template and the edit HTML
2. Search for  </head> 
3. Copy and paste this code before the </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;} #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);} #w2btoTop:active, #w2btoTop:focus {outline:none;} </style> <script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCubic' }); }); </script>

4. You have to save the template before you can preview it. Hopefully this works for you! If it doesn't make sense, defiantly look at Courtney's instructions. 

Oh, and Happy Halloween! I hope you have all kinds of fun and all kinds of candy!

No comments:

Post a Comment