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

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

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 which you need to install for your visitors to make them feel comfortable with your blogs. In some situations the blog post which is long enough or having more over 100 comments you really need this kind of widget so that the visitor can easily reach the top of your blog so the visitor will not face any tiredness while scrolling up to the page. Now let's get back to our widget, hence the "Diwali", Indian Festival is coming near so we thought to give our widget a festive touch. The widget looks very cute and smooth. Without wasting any more time lets go ahead and see how to install this widget. You can check a live demo by visiting the bottom of this page.

Adding The Widget

Before Editing, we recommend you to make a backup of your template, so that anything goes wrong you still have your blog design safe.

The First thing you need to do is to log in to your Blogger account and go to >> Templates >> Edit HTML and search for the ending </body>.

Now just before or above you have to paste this below code.

<style>
#sbtbacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW9F7q1ucu_M_J4o0ZILs020JtdbBT8AO1pajUdj3-VyDeL49sJCtiL2DCdyvinrhYyx6Q85AQcWaaJJXcLprSk0ZIwWpCrTpG06bqw0y-csuEcjiu3MKUuFv5XK6g-NXeilSqdQgYZfiG/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/AVvXsEhW9F7q1ucu_M_J4o0ZILs020JtdbBT8AO1pajUdj3-VyDeL49sJCtiL2DCdyvinrhYyx6Q85AQcWaaJJXcLprSk0ZIwWpCrTpG06bqw0y-csuEcjiu3MKUuFv5XK6g-NXeilSqdQgYZfiG/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by SBT -->
<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>
<!-- Code provided to you by sbt -->
<a href='#' id='sbtbacktotop'></a> 

If you already have jQuery in your blog then remove the Red highlighted code. Finally, click the save button to complete the setup.

Conclusion 

Congrats !! You have made it. now you have learned How to Add A Back To Top Button In Blogger [Special]. Visit your blog and check the awesome widget live in action, hope you liked this tutorial, if you enjoyed then please share it with your friends, we are working hard to develop more such awesome widgets please stay tuned with Us. 

Note: If Your Blogger Template has A header slider. The slider is not showing if you add this code.