How to add a scroll to top button to your site - Carrie Loves Blog

WordPress

Install this plugin – WPFront Scroll Top.

Blogger

Here’s your hack:

1. Log on to your Blogger blog, go to Template > Edit HTML > search for the <head>Β Β just below/after the <head>Β Β tag place this bit of code:

* you may already have a jquery script in your blog’s template, possibly for something to do with Pinterest – take a look at the first few lines of code to determine if you already have it – if you do there is no need to add it again… skip ahead to #2.

Save template.

2. Now go to Layout > click Add a Gadget > select an HTML/Javascript > copy and paste the code below into the content section:

You can either use my default “back to top” button, which is the URL highlighted in red, or you can replace it with your own.

Save.

Happy blogging!

 

43 Responses

  1. Thank you so much, I’ve searched tons of posts to find what I need for my blog but most of them weren’t any efficiend, unlike yours! You also write it down so simply, easy for everyone to apply.
    Words can not express my gratitude and appreciation for your page. Thank you once again πŸ˜€

    http://isitfrench.blogspot.com/

  2. I absolutely love your design skills! Thanks for your techie tips are so genuinely helpful, I don’t think I’d be able to make my blog nicer without them. Love you, keep it up!

  3. Can you do a tutorial for your “Here’s what else thumbnails?” like yours for blogger? Thanks in advance.

  4. Hi , Succefuly done done and worked in mine , with some edits made it left and customized , Many thanx for your nice tutorial , it’s reall appreciated πŸ™‚

  5. Hi, Carrie! I’m so glad I stumbled upon your blog. You’ve got fabulous tips and tricks, and I appreciate their ease of use. I’ve been blogging for a few years; however, I’m just getting into the “meat” of changing things up so they’re not so boring on my blog, ie., technical details. I’m not very tech-savvy, hence the following question: I’ve added the “back to top” button, but I would like to change it up to better match my blog/theme. Can you help me? Thanks so much!

    In Him,
    Brandi

    1. Hi Brandi, I just looked at your blog and it’s looking good! You could always replace the current back to the top image in the code with one that you create. Maybe make it a white circle with pink or gray text, plus a couple of the flowers from your header on the edge of the circle. Hope that helps.

  6. Hi,

    I got this to work ok, then added my custom button to blogger.
    I copied it’s URL & pasted this over your image url in the code.

    But now I get both my image & yours! Do you think it’s just a caching issue?

    Thanks.

  7. Thanks girlie, your tips are the best and very easy to use. I am just getting back to blogging and your site has helped me a great deal.

  8. Your blog has been a gift! I have been creating a new blog for grad school and every tutorial is so easy and clear to follow (plus it looks pretty). I was having some issues with customizing the scroll button with my own. I grabbed the HTML code from photobucket to replace in the code that you gave. It worked, however it is showing a broken image code next to it. I wanted to see if A. you were seeing this and B. how can I fix it? Thanks so much.

    1. Hi Charisse,

      I am seeing the same thing you are. It looks like you have two sets of image code in there. Go back into your HTML and look for:

      <a href=”#” class=”back-to-top” rel=”nofollow”><img src=”http://s1192.photobucket.com/user/cnf120/media/scroll%20button.png.html” target=”_blank” /><img src=”http://i1192.photobucket.com/albums/aa331/cnf120/scroll%20button.png” border=”0″ alt=” photo scroll button.png” alt=”Back to Top” / />

      and replace it with this:

      <a href=”#” class=”back-to-top” rel=”nofollow”><img src=”http://s1192.photobucket.com/user/cnf120/media/scroll%20button.png.html” target=”_blank” /></a>

  9. Hello! I installed the plugin but my “Scroll to Top” image seems to be behind the arrow that is the default for my theme. Any insight on how to get rid of the arrow and just have my custom image? Your blog info helps me so much!

  10. Wow, thank you! This was easy to read, understand, and follow. I just started my tech blog and hope I can make my postings and writings just as easy to read and follow.

Comments are closed.