How to Create Back To Top Button

Posted by Unknown On 0 comments
In this Tutorial, i show you that how to create Floating Back To Top Button in Blogger/Wordpess. If your blog/wordpress (Website) page is long or if you write very lengthy posts then, you must add a Back To Top button to your blog/wordpress, by clicking which, users of your website will be taken straight to the top (Header) of your blog page. You can see my floating back-to-top button at the bottom-right corner of this page OnlineGames2Modo.
To add this button to your blog you will have to need two identical images (.png), one small and one large image. If you don't want different images of your button then use just one image URL for both images.



Create Floating 'Back To Top' Button:

 1. Go To Blogger > Design > Page Elements
2. Select a HTML/JavaScript Widget.


3.  Copy and paste the following code in HTML/JavaScript.

<!--BACK-TO-TOP-STARTS-->
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='URL Of Your Larger Button Image'" src="URL Of Your Smaller Button Image" onmouseout="this.src='URL Of Your Smaller Button Image'"/></a>
<!--BACK-TO-TOP-STOPS-->

4. Replace the required detail with specific URLs of your Back-to-top button.
5. Save it and you are done!

Labels: , , ,

0 comments:

Post a Comment