Hello Everyone!

In this tutorial, we are going to add back to the top button widget to a blogger blog as you can see in the lower right corner of this blog!

Now, to add this widget, follow my instructions:

1. Log in to your Blogger account and go to the Layout section from the link on the left sidebar as shown below:

2. Click on the +Add a Gadget button anywhere where you find it on the page:

3. Choose HTML/JavaScript from the displayed list of functions:

4. Be sure to check the show HTML/JavaScript checkbox on the top and add the following code to the content text field:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />

.backtotop {
    position: fixed;
    bottom: 10px; 
    right: 0px; 
    color: #000000;
    background-color: #ffffff; 
    font-size: 24px; 
    padding: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1.0px; 
    display: none;
.backtotop:hover {
    background-color: #333333; 
    color: #ffffff; 
    text-decoration: none; 
    bottom: 10px; 
    right: 0px; 
    padding: 10px; 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

jQuery(document).ready(function() {
var offset = 300;
var duration = 1000;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
} else {

jQuery('.backtotop').click(function(event) {
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;

<a href="#" class="backtotop"><i class="fas fa-chevron-up"></i></a>

5. Now, save the widget. Drag it till it comes below the blog post section, and also do not forget to hit the Save Arrangement Button:

6. Hurray 😊😊, you have added a back to top button with an animation which on clicking takes the screen to the top!!!

If you like the post, please let me know it by commenting down in the comments section!