Friday, July 27, 2012

Blogger Tip: Scroll to Top Button

You know that wonderful "Scroll to Top" button that appears in the lower right corner of Pinterest? You know, the one that allows to you quickly and easily navigate back to the top of the page without manually scrolling back up? Now you can easily install a similar button on your blog!


I did some some serious searching on the internet to find a good code for installing a scroll to top button. I really wanted something like the Pinterest button that takes you gently back to the top and I was thrilled to find the perfect code. Want to install one yourself? Here's all you need to do:

Design Your Scroll Button

First off, you have to create a button. It doesn't have to be anything fancy. You can use PowerPoint, Publisher, or any other word processing/design program. Use the words "Scroll to Top", "Back to Top" or any other phrase that will signal to readers that a click of the button will launch you back to the top of the screen. You can incorporate an image, but it's not necessary. Just try to make the scroll button  match the overall design of your blog. Once your creation is complete, save it as a JPG or PNG file and make sure it is a small size (my button is 75x75 pixels).


Upload the Image for Your Button

Once your scroll button is complete, you need to upload it to the internet. I know a lot of people use PhotoBucket and that's a great option. I just posted in a blog post and pulled my image link from there. Not sure how? Don't worry- I've got you covered with a video tutorial!

 

Installing the Scroll Button

Now that the hard work is out of the way, all that's left is installing the Scroll button! I did some searching and found a really great code at My Blogger Tricks for a beautiful scroll effect that didn't require me to mess with my blog's template! Yay! I'm sure that the guy who created the code worked REALLY hard to develop it and I do not want to steal his hard work, so hop on over to grab the code. Make sure you grab it all- I know it's a lot of text, but it's SO worth it! Instructions are also included on his page. You just need to copy and paste his code into a gadget in your Blogger Layout, then add your image link to the code. That's all there is to it! Such a simple addition to my blog, but a wonderful little button to help blog visitors find their way back to the top!


Happy Blogging!

22 comments:

  1. I just put the scroll to the top button on my blog. My little crazy monster is sooo cute. Please check it out!
    Thanks,
    Heather B.
    Krazy about Kindy

    ReplyDelete
    Replies
    1. I stopped by to see it Heather - your little monster is adorable!

      Delete
  2. Did it! LOVE IT! You must have been reading my mind the other day. I had seen that post you linked to for creating a button but I could NOT figure out how to make the image part. I did it this morning. My button is a little BIG but I still like it! Check it out at teachingisagift.blogspot.ca. Thanks for your instructions! You made my day, week, month!

    ReplyDelete
    Replies
    1. You're so welcome, and I'm thrilled that you were successful in installing your scroll button!

      Delete
  3. This is turning out to be an awesome day! Two great ideas so far from blog world and I haven't even been out shopping yet!!! Thank you for sharing this I am saving it to my blog help folder and will hopefully be successful in getting it done!
    Chris Kazanjian
    The Kinder"garden" Teacher

    ReplyDelete
    Replies
    1. You're welcome - glad to help! I'd love to see the button when you have it installed!

      Delete
    2. Hi Maria, I got the button installed and I love it! I cannot get rid of the white space around the box but it is not too noticeable. Thank you again for sharing how to do it!
      Chris Kazanjian
      The Kinder"garden" Teacher

      Delete
  4. OMGosh, this is absolutely Fan-freaking-tastic!!! I can't wait to add my own!! I found through Hooty's Homeroom follower giveaway and I am your newest follower. I look forward to reading more...ps, I LOVE tips like this...just about anything techy!! You ROCK!!!
    -Abby
    Mrs. Saunders' Lovelies

    ReplyDelete
    Replies
    1. Awww, thank you! I'm always glad to help!

      Delete
  5. This is soooo cool! love your button!
    Just found an easier way to add a scroll button is use www.scrolltotop.com .
    However, your tutorial is good to add a custom button ! Thanks again :))

    ReplyDelete
  6. Thank you so much. I have been meaning to do this and now I have! Yeah.

    Sara

    ReplyDelete
    Replies
    1. Yay, Sara! So glad you got it up and running!

      Delete
  7. Thanks for sharing!!! I just added this feature to my blog! I've wanted to add it ever since seeing it on Pinterest!! :)

    Helen
    Blue Eyed Beauty Blog

    ReplyDelete
  8. Thank you for this great and simple tutorial! :)
    Cheryl
    Crayons and Curls

    ReplyDelete
  9. This was such a great post, I thank you for it! I love that we can store our images right on our blogs! I had no idea! Now I won't have to rely on Photobucket! Thanks so much! I need to check out your other "Techie Tutorials"!!
    ❤Mrs. McKown
    Little Literacy Learners

    ReplyDelete
  10. I love your blogger tutorials! They have so helpful. I made one of these buttons as well as a favicon this morning, and I am so happy with the results. Thank you for making it so easy to understand! :)

    ReplyDelete
  11. This tutorial was so helpful!! Thank you for posting it! I just added our "back to the top" button and it works! I just need to make it a little cuter!

    Carrie
    Table Talk with C & C

    ReplyDelete
  12. Thanks so much for this tutorial! I LOVE my new scroll button!
    Mrs. Samuelson's Swamp Frogs

    ReplyDelete
  13. Your post is very helpful!! I blog on wordpress and could still adapt the directions for it to work. AND I love your "back to top" image so much that I designed a similar one to match my website's branding! Thanks for such a helpful post!
    www.ProjectGoble.com

    ReplyDelete
  14. iii love it i just added it to my blog plz check it www.prettyscraps.com
    what i love most about it that it just goes to a widget no need to mess up with my code thaaaanx

    ReplyDelete