Liked

Pin It

Add 'Back To Top' Function (Blogger)


Many Times you feel irritation to move scroll up to reach the top/Homeof your blog due to long layout or long post size. Now there are simple code for "Back To Top". If you are in footer section just click on  it and reach the home position of your blog. Here is some simple code that you can add into your blog quickly, follow the instructions given below. I share some images you can use the code with URL of image. Download the desired image and upload some image hosting website for free such as Photo bucket , imageshak or you can upload your blogger and can put URL of image, but it have some transparency issue problem with .png files. 

1. Log in to Blogger Dash Board.
2. Go to Design>>Add a gadget
3. Choose HML/Java Script
4. Copy the code given below and paste it into content area of gadget.
<!-BACK-TO-TOP-STARTS->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="YOUR TITLE GOES HERE"><img onmouseover="this.src='URL OF IMAGE ON MOUSE HOVER'" src="URL OF IMAGE WITHOUT MOUSE HOVER" onmouseout="this.src=' URL OF IMAGE WITHOUT MOUSE HOVER '"/></a>
<!-BACK-TO-TOP-STOPS->
1. Replace  YOUR TITLE GOES HERE with your desired title as "Back To Top", "UP",  "HOME". 
2. Replace URL OF IMAGE ON MOUSE HOVER with the image link that show only at mouse hover on it.
3. Replace  URL OF IMAGE WITHOUT MOUSE HOVER  with the direct source link of desired image that will show always (without mouse hover on it). Remember that you have to change the source link two times in above codes.
4. Save Gadget and done.


NOTE:-You can put same URL in step 2 & 3 if you do not want to change the image when mouse hover on it. 







This image Code with same image URL will look like-

<!-BACK-TO-TOP-STARTS-><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Home"><img onmouseover="this.src='http://1.bp.blogspot.com/-uWnW3RYqghg/TjoPRl08i5I/AAAAAAAAAlU/ztFMdCcIzCI/s1600/BTT.png'" src="http://1.bp.blogspot.com/-uWnW3RYqghg/TjoPRl08i5I/AAAAAAAAAlU/ztFMdCcIzCI/s1600/BTT.png" onmouseout="this.src='http://1.bp.blogspot.com/-uWnW3RYqghg/TjoPRl08i5I/AAAAAAAAAlU/ztFMdCcIzCI/s1600/BTT.png'"/></a><!-BACK-TO-TOP-STOPS->





Please Join this blog and receive updates regularly, after joining I will send you the download link containing complete set of images.

If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook

Comments
0 Comments

0 comments:

Post a Comment

Your Suggestions are valuable for me.

FeedBurner Updates

 

Thanks for Your Arrival !

Followers

Your Precious Arrival

© 2011-2013. Mast Blog Tips All Rights Reserved Arvind Jangid, Sikar, Rajasthan. Template by Mast Blog Tips | Back To Top |