BloggingTutorials

Add Back To Top Button On Your Blog

2

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(http://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

Naveen Kumar
Naveen Kumar is the Founder of F5 The Refresh. He is an SEO Expert by Profession and A blogger by hobby, who writes on various topics like Online Earning, SEO, Blogging and a lot more. You can follow him on Social Media.

How To Redirect Blogspot.in To Blogspot.com

Previous article

Facebook To Buy WhatsApp in $19 Billion Cash and Stock

Next article

You may also like

2 Comments

  1. Nice idea! Thanks to share

  2. Thanks dude… Keep Supporting

Leave a reply

Your email address will not be published. Required fields are marked *

More in Blogging