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

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 login into 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/AVvXsEgNhJUt2DcQnsNFuAH3HbeW0YfWz46P8X-5bWYUc5Ebg2zC2IWF36IwG1aJipEpOF95IviRJpWIjg7zmqxbOGIyl5rRiD_N9HGP0w16lBptFY32irTVghjRkYnDa5W-FyasFNvK0LXy0uyb/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/AVvXsEgNhJUt2DcQnsNFuAH3HbeW0YfWz46P8X-5bWYUc5Ebg2zC2IWF36IwG1aJipEpOF95IviRJpWIjg7zmqxbOGIyl5rRiD_N9HGP0w16lBptFY32irTVghjRkYnDa5W-FyasFNvK0LXy0uyb/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 Red highlighted code. Finally Click the save button to complete the setup

Post a Comment

0 Comments