Adding back to top button to Blogger blog

Hello Everyone!
In this tutorial, we are going to add back to 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. Login 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" />

<style>
.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; 
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 1000;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});

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

<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 as shown in the video clip below and also don't 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 of by contacting me at me contacts:

• E-mail: gouravkhunger18@gmail.com
• E-mail: support@gapp-s.zoneofcode.com