How to add a Amazing Back To Top button in Blogger

Hello friends! Today in this article we are going to talk about How to add a Amazing Back To Top button in Blogger. We will know all that to add a Amazing Back To Top button in Blogger. So stay with this article to know in more detail.


Having a back-to-top button in your Blogger blogging is a lot more important. And if you make this back-to-top button a bit unique or stylish, it will make your blog look a little better. You need to install back-to-top widget to make visitors to your blog feel comfortable.


Having a back-to-top widget in your blog is also important because if your post is long enough or there are more than fifty comments in a post, then in these cases the user can easily reach the top of the blog post. So that it does not have to scroll again and again. 

$ads={2}

Now that you know how to install this widget in your blog, you have to follow some of the statuses given below, after which you can apply this stylish back to top widget in your blog.

How to add a Amazing Back To Top button in Blogger (Step by Step)

  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code

<style>

#sbtbacktotop{

background: url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/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(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/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>
$ads={2}
  • Search for </body>, Paste here the below code
  • After paste the above code remove the Highlighted text if you have already this jQuery.
  • Now click on Save theme icon.
  • I hope you guys enjoyed this Amazing Back to Top button in your blog. Now enjoy the Back to Top button.

Conclusion:

The purpose of today post is to provide you with the How to add a Amazing Back To Top button in Blogger. Did you like these How to add a Amazing Back To Top button in Blogger? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!

Post a Comment

Please do not enter any spam link in the comment box.

Previous Post Next Post
close