Back to Top Button For Bloggers

Tweet

Sometimes your sidebar/Post goes to long and it is very annoying for visitor to scroll up manually. For the ease of your visitors you can add this small button on extreme bottom right of your blog. Its very simple to add this. You can choose custom images for this button. Let's see how to add this button. Add Back to Top Button Procedure:- (1):-Go to blogger and signin to your account. Select your desire blog. (2):-Go to Template and click on Edit HTML and proceed to your HTML code view. (3):-Now search for this by pressing Ctrl+F . ]]></b:skin> (4):-Now copy the below code and paste it just above this code. #backtotop { padding:5px; position:fixed; bottom:10px;right:10px; cursor:pointer; } (5):-Now search for this code. </body> (6):-Copy the below code and paste it before this code. <a href="#" id="backtotop"><img src="URL of Image" alt="back to top" /></a> (7):-Now replace URL of Image with your desired image. (8):-Now find this below code. <a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a> (9):-Copy and paste the below just before the above code. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'></script> <script language="javascript"> $(window).ready(function(){ $('#backtotop').click(function(e){ e.preventDefault(); $('html, body').animate({scrollTop:0}, 'slow'); }); }); </script> Some back to top Images Links. Copy any of the url and replace it with URL of Image.   http://www.download.ba/img/arrow_up_double.gif http://biblio-archive.unog.ch/images/Archivplan/arrow_up.gif http://www2-pcmdi.llnl.gov/cdat/tutorials/getting-started/images/arrow-up http://maliciousnetworks.org/images/arrow_up.png http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png http://www.jefflindsay.com/arrowUp2.gif http://www.internic.ca/Icons/arrow-up_16.gif http://www.lungcancerconnect.com/images/platform/icons/arrow-up~81b3d3ada69457c1dcb56084ee99553b.png http://www.smilelocal.com/resources/images/arrow_up.gif http://www.gadoury.com/img/arrow_up.png Now click on save template and view your blog to see effect. Its very simple. Hope you have liked my this tutorial. Get subscribed to get daily updates right in your inbox.That's all for today.Have a Nice Day.

Sometimes your sidebar/Post goes to long and it is very annoying for visitor to scroll up manually. For the ease of your visitors you can add this small button on extreme bottom right of your blog. Its very simple to add this. You can choose custom images for this button. Let's see how to add this button.

Add Back to Top Button

Procedure:-

(1):-Go to blogger and signin to your account. Select your desire blog.

(2):-Go to Template and click on Edit HTML and proceed to your HTML code view.

(3):-Now search for this by pressing Ctrl+F .

]]></b:skin>

(4):-Now copy the below code and paste it just above this code.

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

(5):-Now search for this code.

</body>

(6):-Copy the below code and paste it before this code.

<a href="#" id="backtotop"><img src="URL of Image" alt="back to top" /></a>

(7):-Now replace URL of Image with your desired image.

(8):-Now find this below code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>

(9):-Copy and paste the below just before the above code.

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

Some back to top Images Links. Copy any of the url and replace it with URL of Image.

 

http://www.download.ba/img/arrow_up_double.gif

http://biblio-archive.unog.ch/images/Archivplan/arrow_up.gif

http://www2-pcmdi.llnl.gov/cdat/tutorials/getting-started/images/arrow-up

http://maliciousnetworks.org/images/arrow_up.png

http://cdn1.iconfinder.com/data/icons/vaga/arrow_up.png

http://cdn2.iconfinder.com/data/icons/splashyIcons/arrow_large_up.png

http://www.jefflindsay.com/arrowUp2.gif

http://www.internic.ca/Icons/arrow-up_16.gif

http://www.lungcancerconnect.com/images/platform/icons/arrow-up~81b3d3ada69457c1dcb56084ee99553b.png

http://www.smilelocal.com/resources/images/arrow_up.gif

http://www.gadoury.com/img/arrow_up.png

Now click on save template and view your blog to see effect. Its very simple. Hope you have liked my this tutorial. Get subscribed to get daily updates right in your inbox.That's all for today.Have a Nice Day.                           

Follow @howdoblog

Subscribe to Our Newsletter

Learn Blogger Tips and Tricks and Subscribe to get daily updates right into your inbox