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.
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!