How to Add A Back To Top Button In Blogger

How to Add A Back To Top Button In Blogger - Special Step

Hello readers !! Having a back to top button widget in Blogger is a very useful thing and it is one of the most important widgets that you need to set up visitors to make you feel comfortable with your blog. In some cases a blog post that is long enough or after more than 100 comments you really need a widget like this so that the visitor can easily reach the top of your blog so that the visitor does not face any fatigue while scrolling on the page.

Don't do Now allows us to bring back our widget, so "Diwali", the Indian festival is approaching so we thought we would give our widget a festive touch. The widget looks very cute and sleek. Proceed without wasting any more time and see how to install this widget. You can watch the live demo by going to the bottom of this page.

Adding widgets

We recommend that you make a backup of your template before editing, so that whatever goes wrong you still have your blog design safe.

The first thing you need to do is log in to your Blogger account and find >> Templates >> Edit HTML and End </body>.

Now before or above you have to paste the code below it.

<style>

#sbtbacktotop{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYy8JrUUVPwmIf1q48BGEk3Wx2fvoaYq0A-vFG3lmFSCqAww8o4YS7-9Lh6R_yQSpU682ZHy-OvX2yn9VTM7Uab84A7A3bBO6xAneSOL0_A992B7eRQ96DmzoNTAmjJhP0RYSID1dKyq7/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDYy8JrUUVPwmIf1q48BGEk3Wx2fvoaYq0A-vFG3lmFSCqAww8o4YS7-9Lh6R_yQSpU682ZHy-OvX2yn9VTM7Uab84A7A3bBO6xAneSOL0_A992B7eRQ96DmzoNTAmjJhP0RYSID1dKyq7/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>

If your blog already has jQuery, remove the Red highlighted code. Finally click the Save button to complete the setup.

The conclusion

Congratulations !! You made it Now you know how to add a back to top button in Blogger [Special]. Go to your blog and see the awesome widget live, hope you liked this tutorial, if you enjoyed it please share it with your friends, we are working hard to develop such awesome widgets Yes, please stay with us.

Header Ads Widget

How to Add A Back To Top Button In Blogger - Special Step