A scroll-to-top button. Do you need one? Oh yes!
These are super handy to have, especially if you have a lot of posts, or several long posts, displayed on your blog feed.
It's a wee bit annoying when you're scrolling through someone's blog trying to find something and then when you want to go back to the top you have to manually scroll.
It's WAY easier to just click on the
Scroll-to-Top button and WHOOSH you're there!
The button usually sits in the bottom right-hand corner of the blog. Sometimes it's a symbol (like mine) or it can even be the word "Top" or "Back to the Top" ... basically whatever you like.
Let's get started with this easy Blogger tutorial.
1. Create Your Scroll-to-Top Button
The first step is to create or find your image. If you google "scroll-to-top images" you will find lots of free ones that you can use.
OR you can click on the image below and grab the ones I made you. They're similar to the one on this blog, but in a variety of colours. The folder contains 4 separate png images, so it's easy to grab your favourite.
2. Upload Image to Your Blog
Before you can use the gadget code (below) you need to upload your new image onto your blog. Start a NEW post, upload the image and be sure to select original size.
Switch your viewing from COMPOSE to HTML.
You'll see a bunch of code. Look for something that looks like this:
src="
https://4.bp.blogspot.com/-4yZJqG7Knq0/WXpPrquFynI/AAAAAAABAwE/7wcsph2KtfYsrEPXeSlv4sL3tFVATK2PgCLcBGAs/s1600/blacktop.png"
You need to grab the part in PINK ONLY!
Now you need to add your source image code into the following:
~~~
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="
YOUR SOURCE IMAGE CODE" /></a>
~~~
Be sure to add YOUR code in place of the pink "Your Source Image Code".
Once you've done that, save (but do NOT publish) your post. I usually call this post "!!IMPORTANT Images!! Do NOT Publish".
3. Add the New Code to a Gadget
Now you need to copy your new code (the one above that starts with <a style= ....).
Go to your Blogger dashboard then to Layout. Scroll to the bottom and add a gadget. Choose HTML/Javascript. Paste your new code into the gadget and save (you don't need to add a title).
If you copied all the code correctly, you'll now have a brand new scroll-to-top button!
Would you like more TUTORIALS?
How To Wrap Text Around an Image
How to Back up Your Blogger Blog
Reducing Image File Size (super important for a faster loading blog)
Thanks for stopping by and if you enjoyed this tutorial please share on facebook or pinterest.
