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
|
|
|
|
|
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.
2. Select the chosen shape and play with its look using the "Format" from the menu.
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.
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.
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. .
EXPLANATION
The image codes as you see has everything that you normally need.
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.
Note:
Here is a post on how to create a scrolling back to top button.
Informative & nicely explained, Uma :)
ReplyDeleteYou are a good teacher. The steps are very clearly explained.
ReplyDeleteQuite informative for bloggers using Blogger platform.. :-)
ReplyDeleteWell explained... :)
ReplyDeleteSomething that I was wanting to know! Thanks a lot Uma :) Will surely try to use it in one of my blogs :)
ReplyDeleteTC! Keep smiling :)
Regards,
Sindhu
Tantu
The Arts & Me
informative...is there any way to create a scroll to top button instead of go to top at once...?
ReplyDeleteThanks 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 :)
DeleteGreat post anita Jee
ReplyDeleteThanks My friend appreciated. Thumbs Up!!!
ReplyDelete