Scroll Back to Top Button | Life and Linda -Blog Design, Decorating, Tablescapes, Gardening

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="http://1.bp.blogspot.com/-5WZU328CSC8/VM0lhyFz-hI/AAAAAAAAX10/TPS1487GNFQ/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 a link to a 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....



Share on Google Plus

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.
    Your comments are welcome!

15 comments:

  1. Another great tip..will try in the morning on my laptop..
    So niiiice of you!

    ReplyDelete
  2. Thank you for your sweet comments on my new blog, so glad you invited me over for a visit, thank you. I did check out some of your tablescapes, and what a treat. What beautiiiiful, happy and fun themes you have designed. Great talent, I really enjoyed. Janice (Florida)

    ReplyDelete
  3. That's a good idea. I end up scrolling up and down when I'm making comments on a blog and that often get's very tiring to do!

    ReplyDelete
  4. That's a good idea, Linda, but you know me, I'm a big, old scaredy cat to try to add anything!! I'm always afraid of messing up something.

    ReplyDelete
  5. Another great tip! You are very generous to share your knowledge with everyone!

    ReplyDelete
  6. I am confused..I will try again tomorrow..I have your turquoise one.. :) will reread all this tomorrow..one of our son-in-laws is just popping by for dinner..so tomorrow..
    THANK YOU Linda!

    ReplyDelete
  7. This is a wonderful feature. I'm not sure I can pull all this and that that you teach so patiently but I appreciate you taking the time to share with us.
    Love the teal color in your blog. You're so talented!
    Take Care,
    Teresa

    ReplyDelete
  8. Great tutorial. I will see about adding this feature (in addition to those tabs) when I get a block of time.

    ReplyDelete
  9. You are so clever! I only understood about half of this, but I will go back and read again. I am not very good at this!

    ReplyDelete
  10. Thank you for this tip! It's really boring to scroll back to the top and this button is very useful. It's awesome that you share how to make our custom button, I didn't new that can use picmonkey.

    Domestic cleaning Wimbledon

    ReplyDelete
  11. Thanks so much for making this button for me, Linda! It looks great on the blog and I love that it fits right in with my colour scheme. You are truly a Blog Fairy!
    And yes, I'm up at an ungodly hour working on a project, lol. Talk to you Wednesday, sweet friend, and thanks again!

    ReplyDelete
  12. WOOHOO!! Thanks again, Linda!
    Your just awesome! I made my own scroll back to top button, finally :)
    PicMonkey is just too cool :)

    ReplyDelete
  13. Good Afternoon Linda, Thank you so much for this information. I am going to be trying this out tomorrow..... fingers crossed I get it right.
    Best Wishes to you.
    Daphne

    ReplyDelete

I so appreciate your visits and sharing your thoughts at Life and Linda.

Need a New Look?