Add a Back To Top Button To Blogger Blog

Hey .. Back to top button is a very attractive stylish widget that can be use to scroll up the whole site by just one click .. This is very useful for your visitors ...Okey .. Let's do it ..

There are some simple steps to be followed by you to add this Back to Top button to your blog ..

Step 01 :

Go to blogger.com and log in to your blogger account first .. Then select the Template option of your blog and get a Back Up first .. Then Click on Edit Html ..

Step 02 :

Then find the <head> tag in your html .. ( Use Ctrl+F buttons to get find in box )

( This is the button that appear in your site after doing following steps .. You can change it as your wish ... )

Step 03 :

Copy the following code and paste it just below the <head> tag and Save your Template ..

<script src='http://yourjavascript.com/94793331211/backtotop.js' type='text/javascript'/>

Step 04 :

Now go to layout of your blog and click on Add a gadget button in anywhere of the layout ... Then select the Add Java script / Html option ..

Step 05 :

Then copy the below code and just paste it in that box without adding topic ..

<style>.mbw-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer;}</style><img class="mbw-back-to-top" src="http://i42.tinypic.com/qnqiw9.jpg" /><script type="text/javascript">/*****gadgetsack.blogspot.com***/jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.mbw-back-to-top').fadeIn(duration); } else { //gadgetsack.blogspot.com jQuery('.mbw-back-to-top').fadeOut(duration); } }); jQuery('.mbw-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; })});</script>

Now click on the save button at the right bottom ..

-------------------------------------------------- END -------------------------------------------------------

Special : If you want to add different image as the button , upload the picture to any somewhere and replace the " http://i42.tinypic.com/qnqiw9.jpg " with your image link ..

Hope you Enjoyed this .. If you have any questions regarding this .. Please ask the by commenting here ...Share your Success also with us ..

Bye .. !

Techkyla