Skip to main content

Add a Floating Back to Top Button in your Blog / Website

Bismillah! The following article is about "back to top" buttons for websites or blogs made with the help of some simple CSS and HTML code. Back to Top button is a button which is used to go to the top of the page. When a user comes downwards reading any article or any other thing on the page of the blog or website then it is difficult and a little bit time-taking work to go back to the top of the page. So if you add a button for this purpose then your site's users / visitors can easily go to top by clicking it. Almost every professional website and blog has a "go to top" or "back to top button".
This tutorial is for you to add a back to top button easily in your blog or website. The steps to add this button are given below:


1. Open your website / blog's HTML and paste the following code just above the </body> tag
<!--BACK2TOP-IMAGE-STARTS-TECHMODULES.BLOGSPOT.COM--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;left:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0otq9AroZVkirnly4gopxD-vtXIuERRtSjVoebV5eLCB1lqY4Tf4dUm8ijPdyfO9Y4Hlat2H3UWrTwUzYH42CEVih-wkJf80MoR66rjjFnV8hMSZ_9MRNAOO9Vzn1MSGHRS2CbhYpKQw/s1600/Back2Top_2.jpg&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnmofH6RZBe2qSOdctP4GiNqX9jRgb1M7JNSfOIg-qEVWjakfF86aBPVHBaVbQtYHsmN9eoY4vbDBg0tbZu3CsKfhQq8ppzqC35Fm2d6fdXQT-8E_YE3DhckP5RuOAHq3OpiwbjH2ilw/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmnmofH6RZBe2qSOdctP4GiNqX9jRgb1M7JNSfOIg-qEVWjakfF86aBPVHBaVbQtYHsmN9eoY4vbDBg0tbZu3CsKfhQq8ppzqC35Fm2d6fdXQT-8E_YE3DhckP5RuOAHq3OpiwbjH2ilw/s1600/B2T_Small.jpg&#39;" /></a> 
<!--BACK2TOP-IMAGE-STOPS-TECHMODULES.BLOGSPOT.COM-->
2. OPTIONAL: You can change the red code with your own image URL.
You have done it. Now refresh your website to check the button.

Features:

  • Fixed position on the page
  • Easy customization
  • Zoom effect on mouse over
  • No effect on page loading speed

Note: Please give your comments about this article with the comment form below.
Labels:

Comments

  1. Edward OttThursday, July 21, 2011

    great blog will be trying out these on my blog.

    ReplyDelete
  2. AnonymousThursday, September 22, 2011

    They will surely help a lot.Thanks a lot ! Would definitely try out in my blog also.
    web design company

    ReplyDelete

Post a Comment

Popular posts from this blog

Download The Best Templates Ever!

Every body knows that template is an essential part of one's site/blog.Evey wants a nice and attractive template for his site or blog.But some need templates of their own choice.Today I'm giving the link to those sites which  provide free templates especially for blogger.These are the best templates.I have chosen them  for you. So here's the links and sites names.You can download them.                                                                                                                                              Download  Best Templates For Blogger Here is one of the coolest template: ...
Post a Comment
Read more

2 Ways To Increase Your Twitter Followers

Last year more or less, the Twitter has grown from a mere option for microblogging become an essential means of social networks. It's not just for bloggers, affiliate marketing and providers of online services more, but Twitter extremely useful as a channel to sell their products off-line as well. Success on Twitter is directly proportional to the number of followers you have quality . However, unlike the subscription mechanisms (such as RSS, AWeber ) is not difficult to build a very good base of followers on Twitter. In this post I will try to discuss some practical tips to help you increase your base of followers on Twitter. Tips to increase Twitter followers Below are more tips for you to get more Twitter followers in a short time
Post a Comment
Read more

5 things you should know about the qualities of a good blogger

There's thousands of bloggers beginners who want to succeed with blogging, but many do not know how. I'm not sure they will all become successful bloggers, only people who will be on the right track. So you might ask me  "How do I choose the right path?"  The answer lies in your brain.Yes, the forms are correct in your brain.  You have full control to choose what you do. So your brain is the master of choosing the right ways. In other words, you should have thought before you can correctly choose the right one. So if you want to become a successful blogger, the first things you must determine is what is a successful blogger? Or exactly what are the qualities you need to become a successful blogger?  Here are the answers:   1.  Hard work.  I read many blogs of successful bloggers and I note that they never teach or advise how to get rich quickly. They say they do not like someone's getting rich overnight. And the...
Post a Comment
Read more