Note: This is currently a Blogger only tutorial, but I plan on making a WordPress version soon!
After getting a ton of great feedback for my last Blogger tutorial, I decided it was time for another one! I was planning on making a tutorial for adding social media icons to your navigation bar, but this week has been crazy busy for me and I haven’t found the time to put that one together. Instead, I found a super simple way to make a back to top button that I couldn’t wait to share with y’all!
I just installed this button on my blog a few days ago, and I love it! 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; it’s the little things that get me! Oh, and it doesn’t involve your template code whatsoever, so there’s no need to worry about messing your design up if you’re clueless about coding. As long as you know some basics about Blogger, you’ll be good to go!
Design 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!
Create 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!
Add 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”.
Save your widget and you’re done! Go check out your blog to see your new button and test it out!
UPDATE: I will no longer be following comments on this post, so if you’re having any trouble, feel free to tweet at me!
