How to Add Back to Top Widget to your Blog on Blogger

Share:
Adding a floating back to top button to your blogger blog can be very helpful for your readers to easily scroll your blog from bottom to top while reading articles.

how to add back to top buttton to blogger blog

Especially, when you write lengthy articles on your blog, this back to top widget will help your readers to easily scroll up while reading a lengthy blog post.

There are several reasons why you should consider using this scroll widget to your blog.
  • This widget will help your readers to easily scroll your blog from top to bottom.
  • It will help to easily scroll your blog by saving time.
  • This tool will help you increase user experience.

How Back to Top Button Works?

After adding back to up gadget codes to your blog, this Scroll button will automatically appear in your window once a user scrolls your blog. This button will appear in all of your blog posts.

This tool is user-friendly so it won’t slow down your blog! All you need is the piece of gadget code.

In this tutorial, I will show you how to insert back to top button to blogger using text and picture in minutes.

How to Add Back to Top Button to Blogger?


This code will show a text top on the button. This button will start appearing once you scroll the page.

1. Go to your blogger layout page & tap on Add a new Gadget.

Adding Back to Top Button to Blogger

2. Select the HTML/JavaScript widget and open the gadget.

Add Back to Top Button to Blogger
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color:#539dcc;
  color: white;
  cursor: pointer;
  height: 50px;
  width: 50px;
  border-radius:50%;
  font-weight: bold;
}
#myBtn:hover {
  background-color:#999;
}
</style>
<button onclick="topFunction()" id="myBtn" title="Back to top">top</button>

<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>
3. Copy this piece of code & paste in the HTML gadget.

Adding Back to Top widget to Blogger step3

4. Save the widget & you're done!

You can easily customize this tool according to your blog design. To change the background color, replace the yellow code with your theme's hex color code.

To change the button name replace the blue name with the actual name you want to use.

How to Insert Back to Top Button to Blogger blog?


This code will show an image on the button. Click on the button to scroll up easily!

1. Copy the below codes and paste it to HTML gadget in your layout page.
<div style="position: fixed; z-index: 65535; right: 10px; bottom: 10px;">
<a href='#Top' title='Gp to Top'><img src='https://2.bp.blogspot.com/-bckH_lGion4/WgvXnThUB3I/
AAAAAAAAAJo/J8x5SFfrnCEiG2x9mylndEO7ras6E0kqwCLcBGAs/
s1600/up%2Bimage%2B3.png' /></a></div>
To use the image on back to top button, you need to paste the above HTML codes into an HTML gadget. Once you're done, this button will automatically appear on your blog. If you don't know how to add HTML codes to blogger gadget, read this guide.

• Blogger Widgets: How to Add Html Codes in Blogger

Now if you wish to change the image in the button, replace the red codes with another src attribution link. Here are some of the images you can use instead:
https://1.bp.blogspot.com/--zM- H6FiC0o/WgvXneVfeSI/AAAAAAAAAJg/Ot1p2h-_g1MC2jfxCy- OYklrcR3TcOuQgCLcBGAs/s1600/up%2Bimage%2B4.png
https://1.bp.blogspot.com/-LNmL4LSVevU/WgvXo8Yh3zI/AAAAAAAAAJs/Z35VcE7K9Twqegv5AAL40E
_jEZMeoAcswCLcBGAs/s1600/up%2Bimage%2B5.png
https://3.bp.blogspot.com/-fLK530y4o3E/WgvXnTbAAQI/AAAAAAAAAJk/lcRx6DT4aYMLhjBmlWPXXtaU
w6bII4kLQCLcBGAs/s1600/up%2Bimage%2B1.png
https://2.bp.blogspot.com/-LKWPZhI-gJI/WgvXpJA40UI/AAAAAAAAAJw/Jivbd2wqt6IDcd8SYfp-
vITIDf_18KBVQCLcBGAs/s1600/up%2Bimage2.png
https://2.bp.blogspot.com/-bckH_lGion4/WgvXnThUB3I/AAAAAAAAAJo/J8x5SFfrnCEiG2x9mylndEO7ra
s6E0kqwCLcBGAs/s1600/up%2Bimage%2B3.png
Conclusion
By performing the above 2 ways you can easily add floating scroll back to top button to your blog on blogger. All you have to do is copy the above codes and paste it into an HTML/JavaScript gadget box. This back to top widget will automatically appear on your blog once the user starts scrolling your site.

Getting error while adding the back to top button to your blog? Let me know in the comment box below. Thanks.

No comments