How to Add A Stylish Back To Top Button In Blogger [2021]

0 365 2 minutes read

Do you want to add a custom stylish back to top button in Blogger? In this article, I will show you how you can do that.

How to Add A Stylish Back To Top Button In Blogger

Here we will use CSS and JavaScript code to make it work. It is a very lightweight code, so you will not affect the loading speed of your blogger website.

What is a back to top button?

The back to Top button is a shortcut button that allows users to quickly navigate to the top of the page. It is generally placed at the bottom left or right of the webpage.

Having this button on the website, greatly improve the user experience of a website.

So, in this article, I will show you how you can easily add a stylish back to top button to your blogger website. If you have any previous BTT buttons then remove them first and then follow the below guide.

How to add a stylish back to top button?

To add the back to top button, follow the below steps.

#1: Go to blogger dashboard > theme > take a backup of your theme.

#2: Now click on edit HTML & remove the previous buttons if any or hide it.

#3: Now search for ]]></b:skin> tag and paste the below css code just above it.

CSS codes :

#mybacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4_RDAaXAOdZXJriLS8lTWRIroBElx027Y9xj-xas8-s8cI1P0Y3yEgpiIl0yGBBkr1R0XhcCRVyXPz7D2nLEP0APF-0jgPNRWm9hwq1Nt77XFg8E4_Ogu35oSKM7Zdzij7_VeIsyWZCvh/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/AVvXsEg4_RDAaXAOdZXJriLS8lTWRIroBElx027Y9xj-xas8-s8cI1P0Y3yEgpiIl0yGBBkr1R0XhcCRVyXPz7D2nLEP0APF-0jgPNRWm9hwq1Nt77XFg8E4_Ogu35oSKM7Zdzij7_VeIsyWZCvh/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}

#4: Now add the javascript code just above the </body> tag.

<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'/>

Now your back to top button is added to your Blogger website.

You have to wait 25 seconds.

Generating Download Link…
Download Now
JavaScript needs to be enabled in order to be able to download.

Video Guide:

Note that to work this code properly, you must have jquery install on your theme. You can install the latest jquery code in your blogger theme by following this guide.

You can also further customize this back to top button. You can remove the image url in the CSS code and add your custom image and use it as a button.

You can also customize your existing Back to top Button. (video) You can easily do that by modifying the CSS code.

Conclusion

I hope you have added the stylish back to top button to your blogger website by following this guide. If you have any doubt regarding this, you can ask me in the comment section.

Don’t forget to share this article with your friends on social media and join our Telegram group for more awesome blogger tutorials like this.

Read Also: How to Lazyload Embedded YouTube iframes in Blogger.

helpfixthat

0 365 2 minutes read