HOT!Buy Ready-Made Authority WebsitesClick Here

Subscribe Us

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


Hello readers!! Having a back to top button widget in blogger is very useful thing and it is one of the most important widget which you need to install for you 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 to the top of your blog so the visitor will not face any tiredness while scrolling up to the page.Now lets 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 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(//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>
<!-- 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.

Conclusion

Congrats !! You have made it. now you have learned that 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. 
How to Add A Back To Top Button In Blogger [Special] How to Add A Back To Top Button In Blogger [Special] Reviewed by TemplatesYard on October 15, 2019 Rating: 5

6 comments:

  1. Your Back To Top button is very funny and cool, sir

    ReplyDelete
  2. Sir, my back to top button came sir but it is not working??

    ReplyDelete
  3. Impressive, lovely back to top button. Thank you sir.
    But i face one problem, in my post it not passing date instead it passing "undefined 202" .can you please help me.

    ReplyDelete
    Replies
    1. Activate every single widget we have mentioned in documentation and then follow this.
      http://www.sorabloggingtips.com/2017/03/fix-recent-random-label-post-widget-in-blogger.html

      Delete

Note : -Before Commenting We Recommend You To Read Our FAQ(Frequently Asked Question) Page.