January 27, 2010

TEXT SIZE minus plus

Add Floating Back To Top Icon Link

Advertisement
You Might Be Interested In Our Popular Article
  • Most Essential Free Softwares After Windows Installation
  • We all are very sensitive to the word ‘annoying’, since its related to loosing visitors. When after scrolling long deep pages, if a readers has to go back to top of page, he/she has to do this by pressing the up button located on the right side of our browser, which is very annoying.

    That is when this little trick comes in handy. This trick will add a floating up arrow button which will help you go back to top of page with just one click, no matter what is the position of the page, even if you are half way down the post, you can click this button to go back to top.

    For WordPress Users:

    Note: Do take backup of your theme before you try this.

    01. Go to Appearance => Editor.
    editor

    02. Now select index.php.
    editor

    03. Add below Code before the closing of first DIV:

    <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i.imgur.com/yttem.gif"/></a>

    All done


    For Blogger Users:

    Note: Do take backup of your template before you try this. Only try this if you are familiar with blogger codes.

    01. Go to Layout => Edit HTML, click on Expand Widget Templates and add the below code before </head>:

    <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i.imgur.com/yttem.gif"/></a>

    02. Save Template. You are done.


    If you are finding blogger code implementation hard, then try our Blogger to WordPress Service

    That concludes this simple and useful tutorial. Hope you like it.



    Related Posts From Network
    Print

    About the Author

    When I was born I was so shocked I didn't speak for a year and half...... My brain has 2 parts, Right and Left, The Right one has nothing left in it and the Left one has nothing right in it......Who says Nothing is Impossible?? I've been doing nothing for years......
    • http://www.netcrema.com/?p=26082 Add Floating Back To Top Icon Link « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

      [...] Add Floating Back To Top Icon Linktutzone.net [...]

    • http://www.andysowards.com/blog/nerdy-daily-web-development-design-links/links-for-2010-01-27/ links for 2010-01-27 | AndySowards.com :: Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?

      [...] Add Floating Back To Top Icon Link Always good to know (tags: backtotop tutorial html wordpress useful blogger trick code) [...]

    • http://www.ubervu.com/conversations/tutzone.net/2010/01/add-floating-back-to-top-icon-link.html uberVU – social comments

      Social comments and analytics for this post…

      This post was mentioned on Twitter by dantearaujo: Add Floating Back To Top Icon Link http://bit.ly/av7VTH...

    • Maxi

      I do not understand. Shows an example

    • Maxi

      I do not understand. Shows an example

    • http://topsy.com/tb/bit.ly/av7VTH Tweets that mention Add Floating Back To Top Icon Link | TutZone — Topsy.com

      [...] This post was mentioned on Twitter by Ronald Bien, Kawsar Ali, Mike Tyrkus, Bites85, Karim Yergaliyev and others. Karim Yergaliyev said: Add Floating Back To Top Icon Link – http://bit.ly/9LmjvZ (via @TutZone) [...]

    • http://www.designfloat.com/story/119276/ designfloat.com

      Add Floating Back To Top Icon Link…

      This trick will add a floating up arrow button which will help you go back to top of page with just one click, no matter what is the position of the page, even if you are half way down the post, you can click this button to go back to top….

    • shafaat

      hi nice blog i need to know i have a blog but im unable to add the disqus comment form in blogger template when i add the disqus comment form nin my blog it also shows me the dedault comment form of blogger i tried each and every step its know ur hope i ahve will u help me plz nd i need to convert the wordpress theme to blogger i have paid one so what i do

    • shafaat

      hi nice blog i need to know i have a blog but im unable to add the disqus comment form in blogger template when i add the disqus comment form nin my blog it also shows me the dedault comment form of blogger i tried each and every step its know ur hope i ahve will u help me plz nd i need to convert the wordpress theme to blogger i have paid one so what i do

    • http://www.tutzone.org/ Bariski

      Can you please tell, which blog?

    • http://www.tutzone.org/ Bariski

      Can you please tell, which blog?

    • http://twitter.com/hack3 Hack3

      Thanks

    • http://twitter.com/hack3 Hack3

      Thanks

    • http://www.nicolebauer.com/ Nicole

      Quite frank, I have no idea where to put that link. I'm using a custom theme and “before the closing of the first div” is not very precise….

    • http://www.nicolebauer.com/ Nicole

      Quite frank, I have no idea where to put that link. I'm using a custom theme and “before the closing of the first div” is not very precise….

    • http://www.nicolebauer.com/ Nicole

      Ah, ok, after a little bit of experimenting I found out that adding it within my wrapper div did the job. Thanks! :)

    • http://www.nicolebauer.com/ Nicole

      Ah, ok, after a little bit of experimenting I found out that adding it within my wrapper div did the job. Thanks! :)

    • http://cssbrigit.com/CNews/entrada/2010021608541660 CSS Brigit | Add Floating Back To Top Icon Link

      Add Floating Back To Top Icon Link…

      This trick will add a floating up arrow button which will help you go back to top of page with just one click….

    • http://www.tripwiremagazine.com/2010/02/130-need-to-check-out-posts-for-designers-and-developers.html 130+ Need to Check Out Posts for Designers and Developers | tripwire magazine

      [...] Add Floating Back To Top Icon Link [...]

    • http://wp-popular.com/popular-word-press-websites/add-floating-back-to-top-icon-link/ wp-popular.com » Blog Archive » Add Floating Back To Top Icon Link

      [...] link: Add Floating Back To Top Icon Link Tags: backtotop, trick, [...]

    • http://favshare.net/add-floating-back-to-top-icon-link-14362/ Add Floating Back To Top Icon Link | favSHARE.net

      [...] Read the original article [...]

    • http://www.favshare.net/ favSHARE

      This article has been shared on favSHARE.net. Go and vote it!

    • http://www.favshare.net/ favSHARE

      This article has been shared on favSHARE.net. Go and vote it!

    • http://www.designyourway.net/blog/resources/very-useful-65-wordpress-hacks/ Very Useful 65 Wordpress Hacks | Design your way

      [...] Add Floating Back To Top Icon Link [...]

    • http://www.rajpromotions.com/facebook_promotion.html Facebook Marketing /Promotions

      found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later ..

    • http://www.rajpromotions.com/facebook_promotion.html Facebook Marketing /Promotions

      found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later ..

    • http://www.virtualsocialmedia.com/social-media-marketing-optimization-services/social-media-pricing/ Social Media Cost | Rate

      Very informative post, will try it in my blog post and let you know how it works.

    blog comments powered by Disqus