DIY Design: Make a Back-to-Top Button for Blogger

| On
April 11, 2014
Okay, first a disclaimer: I am not an expert coder. If you ask me how to code anything on your website or blog, I will probably send you somewhere else, especially if it involves CSS. But HTML I can handle in small doses. And when I recently figured out how to make a back-to-top button without crazy coding, I just had to show you how I do it!

In case you have no idea what I'm talking about, a back-to-top button is the little button that appears in the corner of my blog and if you press it, you'll be catapulted back to the top of the page. For really long pages like archives, a long homepage or even a post with a lot of comments, this is super nice to have. 

First, make a small button. You can do this in Picmonkey or Photoshop, depending on your skill set (or I can make you one!). I made mine a circle, about 80 pixels in diameter. Upload the photo either in a post or in Flickr/Photobucket and then copy the image URL. If you upload it into a post, flip over to HTML first to find the image URL.

Then, open up your blog dashboard and go to Layout. Make a new gadget in a sidebar (or in a footer if you don't have sidebars) for simple HTML--it's called HTML/Javascript. Simply copy/paste this HTML into the box, add in your image link + admire! Look at you go, you HTML wizard.

<a style="display:scroll;position:fixed;bottom:5px;left:5px;" href="#" title="Back to Top"><img src="YOUR IMAGE LINK" /></a>

If you need to change your margins, just change the number before 'px' and that will change how many pixels of margin you have between your button and the top and left sides of the screen. This code will automatically put the button on the left side, but you can easily switch it to the right side by putting 'right' in instead of 'left'. I chose to do that + I also changed my position to 34 pixels from the right side so that it wasn't half on gray, half on white (at least on my computer). 

Let me know if you have any issues! I probably won't be able to help but I'll try ;) If you enjoyed this tutorial, I'd lurvvv if you would pin the image up top! I'd love you even more if you pin it from the actual post page, not my homepage!

Be First to Post Comment !
Post a Comment

EMOTICON
Klik the button below to show emoticons and the its code
Hide Emoticon
Show Emoticon
:D
 
:)
 
:h
 
:a
 
:e
 
:f
 
:p
 
:v
 
:i
 
:j
 
:k
 
:(
 
:c
 
:n
 
:z
 
:g
 
:q
 
:r
 
:s
:t
 
:o
 
:x
 
:w
 
:m
 
:y
 
:b
 
:1
 
:2
 
:3
 
:4
 
:5
:6
 
:7
 
:8
 
:9

Custom Post Signature

Custom Post  Signature