How to add Back To Top Icon on Blogger

How to add back to the top icon on blogger?
Step 1: Login to your blogger account
Step 2: In dashboard just click on "Template" >> "Edit HTML"

Step 3: Click anywhere in HTML code area and press Ctrl + F key or press Command + F (Mac) to search the </body> tag.
Step 4: Choose one of the below HTML code within three different styles and paste it above </body> tag. Then just click on "Save Template" to save and change.
Back To Top Style 1

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0O77Pym0rNLVZ2uVnIBHUAJJJDpdPHrO2r0mA01UoiIHcb5rgN4LQ8vJ61SaBvj-nBf3UhkHckx3fpSfD3vPVFeVcyfIx7jNjUkbaxcv2wyEVLsCwO46Dg1s4cXM71GUJ_Pg8pVBzDic/s1600/styel+%25232.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->
Back To Top Style 2

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWFuVaxkWSOx3bc4IG0wLLBHBqGJvnwx_if9iU6-6Hg5lxzJHCUHAVFwbEO6ELTCOAgTXIESYxS1gOT9TunDmq-htvQJ6jqLmk5nvG7TLYKj3Rd6wvSUx27khgRawQJEXGuPKH4mJNL0/s1600/style+%25231.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->
Back To Top Style 3

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
z-index: 1000;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNbXU8M2JAXXIP84bqN5bUWLTSv_MZt1OyrEx5yFvtWMX6cXkqWHC66MbsFpmPWiDisbxbwzIPyz88rjq-ZGSYQvAE7my_Nh6EJbfVLLvL_l1I0FB9UfSLPojLgqNYll0Lu7XLRWaTxCM/s1600/style+%25233.png" alt="Back to Top"/></a>
<!--Back to Top Button End-->
Back To Top Style 4

<!--Back to Top Button Start-->
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
font-size: 12px;
padding: 1em;
display: none;
img-border: 0px;
z-index: 1000;
}
.back-to-top img {
border: 0px;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a class='back-to-top' href='#'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_dKAoYZemGGfMqhM1YyK8p_ppS5ciJK4h8sxKkAfDwH83Nmp2HUPSHlGrbe2M-FM7KQeibYrrEAVdhQL5g7WV6bqm-O3Dg2H75pdC9vbxN4If8LiTWv364stOe-KBIqfyluL3cp_m-U/s1600/back+top.png'/></a>
<!--Back to Top Button End-->