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)

15 comments:

  1. Thanks for posting the tutorial for scrolling. I just added it to my blog and I love it!

    Lori
    Teaching With Love and Laughter

    ReplyDelete
    Replies
    1. I'm glad you added it! It makes blogging even faster! Thanks for the awesome feedback!

      Delete
  2. I'm your newest follower! Thanks for the "Scroll to Top" code! Love it and added it to mine!
    Check out my blog!
    -Lacey
    Wild about Teaching!

    ReplyDelete
  3. I agree with Lacey! I just added it to my blog. Thanks so much for sharing! :)

    ReplyDelete
  4. Thanks so much for the tutorial!! It was so easy to add that to my blog.

    Amy
    The Crazy Adventures of a University Graduate

    ReplyDelete
  5. WOW!!! I think this was THE EASIEST TO UNDERSTAND instructions for HTML decoding I've done so far!! As a new blogger, I panicked and gave up every time I saw a HTML code. Thank you! I added it to my blog too :) Check it out!

    Joelle

    http://2ndgradesweetpeas.blogspot.com/

    ReplyDelete
    Replies
    1. I'm glad to hear that it was easy for you and others!! I always hate reading a "how to" HTML decoding with confusing instructions. :)

      Delete
  6. Thank you!!! It has now been added to my blog! I am now your newest follower :D

    ReplyDelete
  7. You made that so easy! I'm a new blogger but I've used a tiny bit of code in the past. Thank you so much!

    Julie aka Southern Teacher
    http://southernteacherwbt.blogspot.com

    ReplyDelete
  8. I'm your newest follower! Thank you for such a quick and useful tip! I love how it magically appears! It is on my blog now!!
    ~Fern
    Fern Smith's Classroom Ideas!

    ReplyDelete
    Replies
    1. PS... I'm on your blog roll! Thank you, thank you, thank you for sending your followers my way! You're on my blog roll now too!
      ~Fern
      Fern Smith's Classroom Ideas!

      Delete
    2. I'm glad to help! It makes blog stalking so much easier! haha.

      Delete
  9. Thanks for this help! I love it and I actually got it to work! YEA! :)

    ReplyDelete
    Replies
    1. Thanks for using my tutorial! I love hitting the button and watch it scroll up fast!

      Delete
  10. This was very useful and easy to do. Thanks for posting this! Plus, this scroll to top button looks much more sleek than the other chunky buttons found through google.

    ReplyDelete

I love reading your cheerful comments!