Sunday, March 18, 2012

How-To add "Scroll To Top" button, An Award and Giveaway

Hi guys!  I hope you had a jolly St. Patrick's Day weekend!  Do you spend countless hours on Pinterest?! Don't you think the "scroll to top" button on the bottom right corner is a lifesaver when Pinteresting around?! I do!  So I added a "scroll to top" button on my blog for easy peasy blog reading for you guys!  This gives your fingers a rest when trying to scroll up and down for hours.


This is what mine looks like if you haven't checked it out yet!







Do you want to add one to your blog?
Here's my tutorial on how to add it!!
1. Go to your blogger dashboard, then Dashboard, then Edit HTML















2. Hit Ctr+F (command and find) the following code in your template:  

</body>

3.  Under </body> copy and paste the following code:

<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr("href");
            if ($(window).scrollTop() != "0") {
                $(this).fadeIn("slow")
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == "0") {
                    $(scrollDiv).fadeOut("slow")
                } else {
                    $(scrollDiv).fadeIn("slow")
                }
            });
            $(this).click(function() {
                $("html, body").animate({
                    scrollTop: 0
                }, "slow")
            })
        }
    });
    $(function() {
        $("#w2b-StoTop").scrollToTop();
    });
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>

4.  Save your template and enjoy your new Scroll To Top button! :)

Here's a link to the blog where I got instructions to add this wonderful tool!

On another note!  A couple days ago, Amber @ Sparkles, Smiles, and Student Teaching gave me a fantastic award!  She is a new blogger and teacher with great ideas to share! Make sure to check her out!
I will pass this award soon, but that means I need to go through my Google reader to find out who doesn't have this sweet award yet!  So stayed tuned...

If you haven't checked out my GIVEAWAY yet....DO IT NOW! I'm giving away a $25 gift card to Target!!!  There's 4 ways to enter it!  Hurry before it closes on Tuesday, March 20!

LAST THING: Check out Rebecca from Teaching First. She is celebrating 400 followers (That is amazing!) and is having this awesome Ultimate Linky Party.  This is her way of saying Thank You to everyone!  Check it out and see all the lovely bloggers freebies and giveaway!


Sorry for the LONG LONG LONG post!  There were so many things to share! (Also, this is a great excuse for you to use my "scroll to top" button! LOL)