![How to Add A Back To Top Button In Blogger [Special]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGN-KLknU3LksiB56rk4GzM4Z9CzChrDM8J30rgRAIxBnCRPwQjZPvhQiujODAR34CbLbtV14NTfpRQIwCt31p7g88terqWJ8Qt-PL15LZTLLpv2kvDLGrTj1VVqRxw253n3OQz2oiGcg/w680/How+to+Add+A+Back+To+Top+Button+In+Blogger+%255BSpecial%255D.jpg)
Read more
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>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/AVvXsEj5Cjkg6gJ7eflL5BqbSqmynCng2lrEBOBCtvgK9W4VsSuYKuIH6O036bGCb13OL2wSb8UdwCiuyI24IRpbofhPUb3bW1F9-2NTa2zF8j3fXuQFFlGYTt4BI_axcu549QMOVs2e2AEdGryA/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/AVvXsEj5Cjkg6gJ7eflL5BqbSqmynCng2lrEBOBCtvgK9W4VsSuYKuIH6O036bGCb13OL2wSb8UdwCiuyI24IRpbofhPUb3bW1F9-2NTa2zF8j3fXuQFFlGYTt4BI_axcu549QMOVs2e2AEdGryA/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 [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.
0 Reviews