Adding a floating “back to top” button

Enrich your blog designing by adding smooth back top top button which attract your visitor from your heart.

I.Why to add Back to Top Button.

Back to Top button are those links,Text,Image etc. that send the visitor to Top of the page at a click.It helps to  increase designing of Blog.It  floats at bottom  of Blog.However adding it  it is Optional.

II.Types of back to top button.

There are two type of back top Top button known to me.One is the Back to Top button which directly takes To Top part of Blog and another is back to Top button is animated

Recommendation

I recommend you to use the button which loads with the blog because it has less size so loads fast.

III.Adding Back to Top button.

I have written the tutorials for both types of Button.You can Install any of them in your Blog.At first lets follow some common idea.

1. Download the Back to Top Image for Google Image Search etc.
2. Upload your button Image to Photo Hosting Server like PhotoBucket  ,Picasa  , Flickr.You you want to make text as back to Top button you may see below
3. Go to blogger.(You will be redirected to Dashboard)
4. Click on Design.
5. Click on edit html.
6. Back Up you Template

A.Based on Non animated.

1. Add the following line just above </body>

   <a style="position: fixed; bottom:6px;left:6px;" href="#" title="Blogger Sinker Back to Top"><img style="border: none;" src="YourBlogBackToTopButtonCodeHere"/></a>

2. Replace YourBlogBackToTopButtonCodeHere With your back to Top button image or Icon.Remember the image URL should be direct i.e it should end with image extension like .jpg  , .png  ,  .gif etc.. You can change left to right also
3. If you want to use text use this instead of step A.1

   <a style="position: fixed; bottom:6px;left:6px;" href="#" title="Click to go to top">YourBackToTopButtonTextHere</a>

4. Replace YourBackToTopButtonTextHere with your Text
5. Cheers.

B.Based on Animated Back to Top Button.

1. In Html Editor find </head>  and add the below line just above it.

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
   type='text/javascript'></script>
   <script language="javascript">
   $(window).ready(function(){
   $('#bsbacktotop').click(function(e){
   e.preventDefault();
   $('html, body').animate({scrollTop:0}, 'slow');
   });
   });
   </script>

2. Remove the line 1 if it is already added.For easy find this line  http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js  if it is found remove the line 1.
3. Find the line ]]></b:skin> and add the following code just above it.

   #BsBackToTop {
   padding:5px;
   position:fixed;
   bottom:10px;right:10px;
   cursor:pointer;
   }

4. You can make right to left in step B.3
5. Find the </body> in Html editor and add below codes.

   <a href="#" id="BsBackToTop"><img src="YourbacktoTopImageUrl" alt="back to top" /></a>  

6. Replace YourbacktoTopImageUrl with the direct image Url of Back To Top Icon.
7. Bye.Cheers

Subscribe At free
Thank you for visiting FacebookSinker.blogspot.com. Please don't miss any of the updates by subscribing to our RSS feed or email updates.