Scroll Back to Top Button

I don't know about most of you, however when I visit a blog and end up reading quite a few posts and I have scrolled way down, I hate having to scroll all the way back to the top.

There's an easy fix and I think most of you can handle this baby!  LOL

Why not add a scroll back to the top button?  It's button that goes into a Javscript gadget on your layout.  You add it at the bottom of your blog's layout... the footer is a good place for it.


Here is a picture of it on my blog's background. You do want it to appear as a transparent image, so make sure you save it as .png.

Open a Javascript gadget

Paste this code Below, into the box.  Click save and take a look at your blog.  Look on your bottom right of your blog while you are scrolling down.  Click the button for it to take you back to the top.


<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiriciR5VFQ6AJKjXf2AG7vKMpWQ3VZHPqXFaavtGjdMHLaLSueSe6jesFxC3I41lHTaSW8VqGb3bRhfn77ds8f904TlWEwSAVjIrkTWBOfuW4YYIGzBctYkhLWBSABHAps5O0XKZ8_lezJ/s1600/blue.png "/></a>
<!--BACK TO ENDS-->


Now take a look at this code.  It has my blue green button in there.  You can change that out with any
other button.  Notice it is.png.

If you don't want to make yours, you can search on Google or use some of these:

INSTRUCTIONS FOR MAKING YOUR OWN

To make your own  SCROLL BUTTON , follow these instructions: Open PicMonkey, click Design.
On the left is Basic Edits, click Transparent Canvas, like example below. Click apply.

Now click  the Butterfly in Basic Edits.  Choose your shape!  I chose labels.
You can see for this demo, I clicked the pretty curvy box shape as shown above.
Now that you have the shape there, here's where you change the color.
If you are matching your blog, try to find the color code.  I chose #f73846
for this one. Where it says  Color. Either pick a color or copy and paste your chosen color code
into the space, where it said 000000.  Click enter to see the color change.
Here's some  links to a  color chart!
Color chart

Now that we have the shape and color, we can add the arrow. Click the butterfly and choose your arrow.

I chose the simple arrow and I changed the color to white, so it shows up on the tangerine background. See the outline around the black arrow, drag the small circle to rotate it, so it is pointing up. Drag the corners in to make it smaller to fit the shape. Drag it into the pretty shape.
Now we have our button, we need to crop it. Click under Basic Edits and choose crop.
Crop it close around the button.

It's time to resize this cute button.  Under the same heading, Basic Edits, choose Resize and make your image close to 52 x 52.  Save it as  scroll .png   Upload it on a draft post, get the url and paste this into your Javascript box with the code.  Remove my link and add yours.  Ta Da!

A TIP for getting those url's  from an uploaded photo preview

When you upload the photo you want, after you see  the preview box, where it is highlighted in blue, right click the photo to get the url without showing the photo in a  post.

Don't forget I have Blogger tutorials.  I have organized almost everything on my blog.

Click the monitor to see all of my Blogger tutorials.

Now,  let's jump for joy after you add your scroll button. Another tip for you....

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.