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>If you already have jQuery in your blog then remove Red highlighted code. Finally Click the save button to complete the setup.
#sbtbacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjszOyM0aQiU9ZNGW2WwWxcRZwroyjOcOioQ2QF1eYMmWH6RbZr0UF9ZxKhbpVsNdt16nQyzVfVCNwLcjtPC3yqc44dXEHhzqXqsk3mcV6LxX2KcLnUQSRMgb4WGMHcEyA1h_2gcEQsSEDk/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/AVvXsEjszOyM0aQiU9ZNGW2WwWxcRZwroyjOcOioQ2QF1eYMmWH6RbZr0UF9ZxKhbpVsNdt16nQyzVfVCNwLcjtPC3yqc44dXEHhzqXqsk3mcV6LxX2KcLnUQSRMgb4WGMHcEyA1h_2gcEQsSEDk/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>
Conclusion
Congrats !! You have made it. now you have learned that How to Add A Back To Top Button In Blogger .
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.
You are welcome to share your ideas with us in the comment!