How to Make a Back To Top Button in Blogger

Hello, friends! This article will teach you how to create a great Back To Top button in Blogger. When we add an Amazing Back To Top button to Blogger, we will see all of this. 

It’s much more essential to have a back-to-top button in your Blogger post. This will improve the look of your site if you create this back-to-top button uniquely or stylishly. Install a back-to-top widget on your blog to make visitors feel more comfortable.

A back-to-top widget in your blog is also essential since, if your article is long sufficient or if a post has more than fifty comments, the user can easily reach the top of the blog post in these situations. So it doesn’t have to browse all the time.

You will need to follow some of the below-mentioned statuses before using this stylish back-to-top widget once you have learned how to install it on your site.

 How to Make a Back To Top Button in Blogger

  • Log in to your Blogger.com act as access.
  • Then click the Customize arrow under Theme Section.
  • Select Edit HTML now.
  • Select the code area and press Ctrl+F to pull up a search bar on the display screen.
  • Copy and paste the code below.

<style>

#sbtbacktotop{

background: url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;

height: 130px;

width: 72px;

padding:5px;

position:fixed;

bottom: 5px;

right: 5px;

cursor: pointer;

transition:none;

  z-index:15;

}

 #sbtbacktotop:hover{

  background:url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png)no-repeat;

background-position: 0 -142px;

}

</style>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js’/>

<script type=’text/javascript’>

//<![CDATA[

$(window).scroll(function(){if($(this).scrollTop()>100)

{$(“#sbtbacktotop”).removeAttr(“href”);$(“#sbtbacktotop”).stop().animate(

{bottom:”0″},{duration:100,queue:false})}

else{$(“#sbtbacktotop”).stop().animate({bottom:”30000″},

{duration:8000,queue:false})}});$(function()

{$(“#sbtbacktotop”).click(function()

{$(“html, body”).animate({scrollTop:0},”slow”);

return false})});

//]]>

</script>

<a href=’#’ id=’sbtbacktotop’></a>

  • Find /body> and copy the code below.
  • Remove the highlighted text after copying the above code if you already have this jQuery.
  • Now, from the drop-down option, choose Save Theme.
  • I hope you enjoyed using this great Back to Top button on your website. You can now return to its original page by clicking the Back to Top button.

Conclusion:

The purpose of today’s article is to show how to create a fantastic Back To Top button in Blogger. Did you like learning to make a wonderful Blogger Back To Top button? Please leave a comment in the space below. Please share your thoughts with us in the comments section.

See also  How to Share Files Across Devices Using Microsoft Edge Drop in 2022

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button