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

NoFollow Blogger Comments - Increase Traffic To Your Site.

What Are NoFollow Tags?   NoFollow is a tag given to your site's/blog's links which is used to tell search robots to index a URLbut do not follow it.It is used when you are linking to a non-trusted site/blog.NoFollow links were originally created  to block Search Engines from following the links but not to follow them,beacause of theamount of blog comment spamming.Spammers are spamming in blog comments to get better SEO and anchored  links for their own sites/blogs.By these tags you just showed to search robots that the link they are indexing is only a text. Why To Nofollow Comment Links In Blogger? Robots follow all the comment  links on your blog they can spam and if they do so then your all site ranking and traffic will decrease suddenly,so you will not find any comment on your blog.If you add Nofollow comment links to your blog  your site/blog would be protected by Spam!
4 comments
Read more

Align ‘Read More’ Link/Image To Right Or Left

Read more is the common button/link in a website.Each Customized or a Default template has it’s own read more button/link.But Beginners don’t know much about CSS and HTML.If one wants his read more button/link at right side while he is having at left and one wants his read more button/link at left side and he is having at right side so he must follow this post.
3 comments
Read more

Hide Post Date,Time And Author

There many reasons for hiding post date,time and author like a blogger wants to see his blog clean and clear so he hide them.I am going to show you that how to hide post date,time and author name.So don’t waste your time on thinking and just follow the simple steps given:
4 comments
Read more