google.com, pub-6771220306917688, DIRECT, f08c47fec0942fa0
Latest Articles
Loading...

Info Post
Well, there is nothing as easy as creating your own "Back to Top Button" and I always wondered why I have searched for such buttons years back without creating my own. It was that easy and fun to create one such button. To create your own back to top button all you need is an image and a simple html code.

Note: All images are created by me for this post. You are free to use them and in case of sharing it through writing blog posts, kindly give due credits. See below for more images
button images

button images

button images

button images

button images


Yes, you too can create your own buttons by following the two steps below.

Step 1- How to create a Back To Top image button


Open MS PowerPoint. You can even use MS Paint but MS PowerPoint is the best button creator since it has lots of options and tools to make a great looking button.

1. Go to top menu and choose Insert -> Shapes, and choose any shape.
button creator

2. Select the chosen shape and play with its look using the "Format" from the menu.
button creator

3. Next, click "Insert" -> Text Box, and enter the text "Back To Top" anywhere in the slide.

4. Move the text onto the shape for creating a perfect look.
button creator

5. Using CTRL+A, select all to copy and paste the selected images in MS Paint. Save the image as .png giving it a suitable name. By shifting the images from PowerPoint to MS Paint, we are merging the images together as one.

button

button

button

button

button


Step 2 - How to add codes to make the back to top button work


  • Go to your Blogger Dashboard -> Layout -> Add a Gadget -> HTML/JavaScript
  • Add the image codes in to your HTML widget. To find your image codes, just upload the image into a blog post as usual and copy the codes that is been displayed in the HTML of your blog post.
  • The codes should look like in the below image. Do the necessary changes that you see in RED and save your arrangement. .
back to top html

EXPLANATION
The image codes as you see has everything that you normally need.

<a href="#top" style="display:scroll; position:fixed; bottom:10px; left:5px;" title="Back to Top">

The "#top" or "#" in the a href will take you to the top of the current page . Instead of just making the "Back To Top" button appear in the exact location of the HTML widget, we make sure of "style" attribute to make the image appear on the bottom left ( bottom:10px; left:5px) in a fixed position (position:fixed) and display option as scroll (display:scroll) since we want the image to appear as we scroll up and down the website.

In case you want the "Back To Top" image button to appear on right, just replace left to right in the above. To make it appear in center, increase the value of the bottom attribute as bottom:200px. Just play with the codes and see how it works. Hope you enjoyed this blog post!

Note:
Here is a post on how to create a scrolling back to top button.

9 comments:

  1. Informative & nicely explained, Uma :)

    ReplyDelete
  2. You are a good teacher. The steps are very clearly explained.

    ReplyDelete
  3. Quite informative for bloggers using Blogger platform.. :-)

    ReplyDelete
  4. Something that I was wanting to know! Thanks a lot Uma :) Will surely try to use it in one of my blogs :)

    TC! Keep smiling :)
    Regards,
    Sindhu
    Tantu
    The Arts & Me

    ReplyDelete
  5. informative...is there any way to create a scroll to top button instead of go to top at once...?

    ReplyDelete
    Replies
    1. Thanks for the question! You have in fact helped me to write a blog post and so crediting your name as well here - How to Create a Scroll To Top Button :)

      Delete
  6. Thanks My friend appreciated. Thumbs Up!!!

    ReplyDelete

Thank You for visiting Momscribe.com !
Your contribution is greatly appreciated.
Please feel free to subscribe to this blog either by Email or any methods listed on the right side of this content.

நன்றி ! மீண்டும் வருகை தாருங்கள் :)