How to Add a Stylish Back to Top Button in Blogger

 

Hi to all in this article I am going to tell you all about how to add a stylish back to top button in blogger easily in just few minutes.

Read the below steps carefully and completely, if you miss any one step then you will definitely get issues while saving the code.

How to Add a Stylish Back to Top Button in Blogger

Steps to add Back to Top Button in Blogger

---

Step-1: First of all you need to login to your blogger dashboard by using your login credentials.

Step-2: Click on Theme section -> Customize -> Back up Theme -> Download Theme.

Step-3: Now you need to click on Theme section -> Arrow button -> Edit HTML.

Step-4: Now click on CTRL +F and search for ]]></b:skin>.

Step-5: Now copy the below provided CSS code and paste above ]]></b:skin>.

<!--[ Paste the below code above ]]></b:skin> ]--> #mybacktotop{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd465DOvNd5c0TQ6vR5eH3aDHnKakYVM2GJw2awnZ1AfB9P2pUO0hvy8z-JJfH_1WI614BCOutkAdithHm7-qA7M1nYI96S3O4cnMaNYp15VuiCTDWj1KyFNeR404p5AH8hEDEwa2SH9I/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; } #mybacktotop:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxd465DOvNd5c0TQ6vR5eH3aDHnKakYVM2GJw2awnZ1AfB9P2pUO0hvy8z-JJfH_1WI614BCOutkAdithHm7-qA7M1nYI96S3O4cnMaNYp15VuiCTDWj1KyFNeR404p5AH8hEDEwa2SH9I/s1600/back-to-top-sprite-30224d9b.png)no-repeat; background-position: 0 -142px; }
Copy

Step-6: Now copy the below provided JavaScript code and paste it above </body> or closing body tag.

<!--[ Paste the below code above </body> ]--> <script type='text/javascript'> //<![CDATA[ $(window).scroll(function(){if($(this).scrollTop()>100) {$("#mybacktotop").removeAttr("href");$("#mybacktotop").stop().animate( {bottom:"0"},{duration:100,queue:false})} else{$("#mybacktotop").stop().animate({bottom:"30000"}, {duration:8000,queue:false})}});$(function() {$("#mybacktotop").click(function() {$("html, body").animate({scrollTop:0},"slow"); return false})}); //]]> </script> <a href='#' id='mybacktotop'/>
Copy

Step-7: Click on Save button.

Step-8: Now you have added stylish back to top button in your blogger website successfully, you can check it by visiting your blogger website.

Conclusion

---

If you follow above provided steps then you can add stylish back to top button in your blogger website easily in just 2 minutes.