Add Back To Top Button On Your Blog

Hi friends, Today I am here with a blog post that is very helpful for all blogger as well as designer. Today i learn How to add a Back to button on your blog. This is very useful when your blog post is so lengthy and it bother you to scroll up. By this widget, on one click you will be on the top.

It not only helps you to Back on the Top but but also increase the appearance of your blog.

To add this on your blog follow these simple steps:

1. Go to your blogger Dashboard.
2. Click on Template and download backup of your template.
3. When you finish the the downloading click on Edit HTML Button.
4. Find </Body> in HTML coding.

<style>
#rocketbacktotop{
background: url(&#39;http://1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png&#39;) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
z-indez:1;
}
#rocketbacktotop:hover{
background:url(https://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 Deep Sinha –>
<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)
{$(“#rocketbacktotop”).removeAttr(“href”);$(“#rocketbacktotop”).stop().animate(
{bottom:”0″},{duration:100,queue:false})}
else{$(“#rocketbacktotop”).stop().animate({bottom:”30000″},
{duration:8000,queue:false})}});$(function()
{$(“#rocketbacktotop”).click(function()
{$(“html, body”).animate({scrollTop:0},”slow”);
return false})});
//]]>
</script>
<!– Code provided to you by skillblogger Blog –>
<a href=’#’ id=’rocketbacktotop’/>
Copy the HTML code and Paste it under the </Body>.
Now Save your template and enjoy the blogging.

Click here to Live Demo