• Home
  • About
    • About
    • Contact
    • Privacy Policy
    • Disclosure
    • Work With Me
  • College
    • Dorm Life
    • Money and Budgeting
    • Organization
    • Productivity
    • Studying
  • Blog Advice
    • Starting A Blog
    • Favorite Blog Tools
    • Blogging Resources
    • Making Money
    • Blog Growth
    • Income + Traffic Reports
    • Design
    • Coding Tutorials
    • Social Media
    • Genesis Framework
    • WordPress
    • Blogger
  • Wellness
  • Lifestyle
  • Career
    • Internships
    • Interviewing

Jessica Slaughter

How To Make A Back To Top Button For Your Blog

in Blogging, Coding Tutorials on 08/15/14

Back to top buttons are a great way to improve your reader’s experience on your blog, making it easier for them to scroll through long pages. You can use any image you want, which is perfect for anyone who wants to make sure this button matches their design! I also love how it fades in and out; these little details really make an impact on experience! Oh, and it doesn’t involve your template code whatsoever, so there’s no need to worry about messing your design up.

How To Make A Back To Top Button For Your Blog | Jessica Slaughter

Blogger Tutorial

Designing your button

I made my button using PicMonkey, but you can use whatever photo editing method you want! This website is my favorite for editing/creating graphics because it’s free and has just about everything someone with my skill level could need! Maybe someday I’ll make it to the Photoshop level, but right now I’ll settle with pre-made graphics.

For my button, I just took one of the pre-made arrow graphics and added some text below it. You can get as fancy as you want, or keep it simple like I did!

Once you’ve designed your button, head over to a website like Photobucket and grab the URL for your image. You’ll need this when you’re inputting your code!

Creating your widget

Go into the Layout section of Blogger and create a new HTML/JavaScript widget in the footer area of your blog. This is where all of your code will be going!

Adding the code

This is where the magic comes in! After searching for what seemed like forever to find the perfect code, I found this at My Blogger Tricks. They have a bunch of other great tutorials, but this is one of their updated versions with all the extra smooth scrolling and fading effects. Paste this code into the widget you just made, and add the URL for the image you created where it says “IMAGE LINK” on line 13.

Save your widget and you’re done! Go check out your blog to see your new button and test it out!

WordPress Tutorial

Thanks to plugins, WordPress users can have a back to top button up in seconds. Go install the Scroll Back To Top plugin, activate it, and head to its settings page (under “settings” in your WordPress dashboard). Then fill out the details, like the color and shape you want, save your settings, and you’re done!

3 Comments

  • Twitter
  • Facebook 0
  • Pinterest 45
« How To Take A Break From Blogging
Steps To Having A Good Morning »
Jessica Slaughter Blogger

Hey there! I'm Jessica, a 22 year old Software Engineer at Google living in Seattle, Washington. Welcome to my blog! Expect a lot of college, blogging, career, and healthy living advice along with some mixed-in life ramblings!

Follow

Top Posts & Pages

  • 12 College Dorm Room Must Haves
    12 College Dorm Room Must Haves
  • How To Customize The MailChimp Signup Form On Your Blog
    How To Customize The MailChimp Signup Form On Your Blog
  • How To Earn Money Using ShopStyle Affiliate Links
    How To Earn Money Using ShopStyle Affiliate Links
  • Lazy Meal Prep Ideas for College Students
    Lazy Meal Prep Ideas for College Students
  • 6 Things Worth Investing In Your Freshman Year Of College
    6 Things Worth Investing In Your Freshman Year Of College
  • Finding Your Instagram Style
    Finding Your Instagram Style

Copyright © 2022 · Design by Jessica Slaughter

Copyright © 2022 · Glam Theme on Genesis Framework · WordPress · Log in

Disclosure

Some of the links below are affiliate links, which means that if you click on a product link, I may receive compensation. This compensation comes at no additional cost to you, and as always I only recommend products I trust!

Jessica Slaughter is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.