Best 2 Know

The Ultimate Blogging Resource

  • Advertising
  • WebHosting
  • Contact Us
  • Blogger
    • Blogger Templates
    • Blogger Tutorials
  • Browser
    • Firefox
    • Google Chrome
  • Google
  • Internet
    • Facebook
    • Twitter
  • Thesis
  • Windows
  • WordPress
    • WordPress Themes
    • WordPress Plugins
  • More
    • Linux
    • Review
    • Solutions
    • Announcements

How to add back to top button

If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?

If you look at the bottom of this blog, there is a picture arrow pointing to the top. The image useful as a quick launch a header toward the top of the blog. How to produce it is not too difficult. You only need to add some little code in your blog template. You want to try?

Go to Edit the HTML directly to your blog template and add the following code before </body> code :

<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;right:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>

that’s it and save your work !

You can change the position of the button to the right or left to change the part of this script like this :

<a href=’#’ style=’display:scroll;position: fixed; bottom:5px;left:5px;’ title=’Back to Top’><img src=’http://lh3.ggpht.com/_XXrP_Jobycw/STTl0OdmZ6I/AAAAAAAAADY/61hPxUpuwXU/top.jpg’/></a>

Or you can changes the picture and destination URL. like ads link .

<a href=’http://url destination’ style=’display:scroll;position: fixed; bottom:5px;let:5px;’ title=’Back to Top’><img src=’http://your.image.location’/></a>

You can edited the button with your imagination. Happy Blogging!

Update

Make Your Large Or Changing Like My Blog Has

Note: You required Two Images If You Want To Make Image Larger Then You Required one large and same small image.

If you want changing image then you required Two different images.

Go to Dashboard > Layout > Edit HTML

Search For </head> . Before </head>

Add This Code :

<script type=’text/javascript’>
function mouseOver()
{
document.getElementById(&quot;b1&quot;).src=&quot;http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg&quot;
}
function mouseOut()
{
document.getElementById(&quot;b1&quot;).src=&quot;http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg&quot;
}
</script>

Then Go To Bottom Of Your Blog And Add This Code :

<a href=’#’ onmouseout=’mouseOut()’ onmouseover=’mouseOver()’ style=’display:scroll;position:fixed;bottom:5px;right:5px;’>
<img alt=’Back To Top’ border=’0′ id=’b1′ src=’http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg’/></a>

Replace The : http://4.bp.blogspot.com/_4fVBL4fjrFI/Sa6g-Gqz9uI/AAAAAAAAClU/V4ImwYVHpCw/s1600/B2T_Small.jpg

With Your Image You Need When There Is no Mouse On It

And Replace :
http://2.bp.blogspot.com/_4fVBL4fjrFI/SWJFdnGHKDI/AAAAAAAABtk/Vdn-WUg6nC8/s1600/Back2Top_2.jpg

With The link Of The Image You Required When There Is mouse On The Image

Subscribe via Email

Share this:

  • Twitter
  • Facebook
  • Pocket
  • Print
  • WhatsApp
  • Email

Related

March 2, 2009 Ritesh Sanap Blogger Tutorials, Internet, Solutions Blogger Hacks, Cool things, Tutorials

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Post navigation

Previous Previous post: Administrator privileges for guest
Next Next post: Install Loading page status in Blogspot

Currently Trending

  • How to download Specific parts of YouTube videos
  • h4x0r ( Hacker ) - Blogger Template
  • You might also like this Widget for blogger or Related post widget
  • How to add a bookmarking widget below Post Title
  • 100+ Best Online Games - Who Else Wants to Play ?
  • Bypassing Word Verification for links in Orkut
  • How to Upload Images by URL in Blogger
  • Shortcut keys to Complete URL
  • Random Post Widget for Blogger
  • Google Voice invites for students

Get Latest post in your Inbox

Random Posts

How to Display Random Posts

November 26, 2012 By Ritesh Sanap 2 Comments

Speed-Up My Computer & Folder Navigation in Windows XP/Vista

August 15, 2008 By Ritesh Sanap Leave a Comment

Free Online Angry Birds game

June 12, 2011 By Ritesh Sanap 1 Comment

How to Change the Welcome/Login Screen in Windows XP ?

August 30, 2008 By Ritesh Sanap 8 Comments

AnimeStar – Blogger Template

June 14, 2010 By Ritesh Sanap Leave a Comment

WordPress

HTTP2 Server Push for W3 Total Cache Minify plugin

August 17, 2016 By Ritesh Sanap 5 Comments

How to Disable Emojis in WordPress

January 6, 2016 By Ritesh Sanap Leave a Comment

JetPack Related posts and Sharing not working with NGINX

November 10, 2015 By Ritesh Sanap Leave a Comment

Simply Pure – WordPress Theme

November 2, 2014 By Ritesh Sanap 2 Comments

Advanced What should we Write about next? – WordPress Plugin

July 28, 2014 By Ritesh Sanap Leave a Comment

How to Disable Self Pingback or TrackBack

January 16, 2014 By Ritesh Sanap Leave a Comment

BlueStrap – WordPress Theme

January 1, 2014 By Ritesh Sanap 15 Comments

How to Create Multiple Excerpts in WordPress

December 24, 2013 By Ritesh Sanap Leave a Comment

How to Disable Auto Update in WordPress

November 21, 2013 By Ritesh Sanap Leave a Comment

How to Delete Feedbacks from JetPack Contact Form

November 19, 2013 By Ritesh Sanap 9 Comments

Recent Posts

  • HTTP2 Server Push for W3 Total Cache Minify plugin
  • How to show hidden files and folders in Mac OS X
  • How to Disable Emojis in WordPress
  • Canva – Online Photo Editor
  • JetPack Related posts and Sharing not working with NGINX

Archives

Recommends

  • DigitalOcean – Cloud Hosting
  • Dropbox – Cloud Storage
  • Elegant Themes – WordPress Themes
  • LastPass – Password Manager
  • Like us on Facebook
  • Follow on Twitter
  • +1 on Google
  • Subscribe via Email
  • RSS Feed

© 2023 Best 2 Know · All Rights Reserved · We ♥ DigitalOcean