How to add back to top button in blogger

on

 How to add back to top button in blogger

Table of Content (toc) 
Hello everyone welcome to Virk tech blog. In this post i will teach you how to add back to top button in blogger. So lets get started : 

How to add back to top button in blogger

So friends having a back to top button is not    compulsory  in any blog but you can use it to make your readers feel comfortable and since diwali festival is also coming so we have come up with a new feature which you can easily use to give a festive look to your website or your blog. 


    Here are the steps to add back to top button in blogger. 

    The first thing you'll need to do
    •   Log into your blogger account
    • Then go to themes
    • Click on customize
    • And edit html
    Now here you have to find the word body the ending of body  you've got body now just above it you have
    to copy the code. Just copy the code from here and paste the code just above the body. 
    <style>#sbtbacktotop{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTIg_4CvBWdMSY0y2XZcc0z_bGo3n56FwsymRR5-bpqVez8Lyrpd_lvfJsYxgZxcOJsCOO2rnYNRn0nR7MD414aVz5Hy2LOP7mFuAOCpifjea0YM696HucZZTlvrp-4-Eq3e7Xr1er2p-H/s1600/back-to-top-sprite-30224d9b.png) 0 0 norepeat;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'></

    Now click on view blog now you can see back to top button has been added successfully just scroll down
    and then click on this rocket it will take you back again the top page with animation. 

    Conclusion 

    Okay, so that's all for today's post if you feel this post was helpful and you want us to keep posting such useful content related to blogging and then please do not forget to leave a comment in comments box.

    Toc



    Comments

    Post a Comment