Saturday, October 19, 2013

Scroll to Top Buttons for Blogger


Scroll to Top Buttons for Blogger
 

After a long time, I'm come with a nice widget for blogger. Maybe you've already got an idea what my today's post is about. From the post title and the image, it is clear enough to guess that you're getting a Scroll to Top script for your blogger blog. I'm gonna share some buttons too. But you can easily replace the default button with your custom image.
Back to top PNG Button for Blogger
This is the default button of the script I'm sharing here. You can view the demo at the bottom right corner of the page. Just scroll down and see the button. Then hit on this to back to the top.  But if you don't like it, or if you wanna use your own button, then you can replace this one. Now follow the procedure below (as simple as adding a JavaScript):
  1. Make sure you're signed in to your blogger account.
  2. Now go to your blogger Dashboard or Control Panel or whatever you call it.
  3. Go to the Layout, and hit on the Add a Gadget button from anywhere.
  4. Choose HTML/ JavaScript gadget.
  5. Copy the following code and paste it in the Content box.
  6. Now Save the gadget and View your site!
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a href="http://munnamark.blogspot.com">
</a><a id='noop-top' style='display: none; position: fixed; 
bottom: 1px; right:1%; cursor:pointer;font:12px arial;'>
<img src='http://2.bp.blogspot.com/-
ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/>

There are many codes available throughout the web to add Back to Top button. Almost all of these will ask you manually edit your HTML. But this one very simple just like adding a gadget nothing else. 



Scroll to Top Button

Scroll to Top Button

Back to Top Button

Back to Top Button

Scroll to Top Button

Smooth Scroll to Top Button

Using Custom Image:
At the beginning of this post, I mentioned, you can use your custom image with this script. Look at the blue part of the code. This is actually the link of the button where it is uploaded. If you have any button of your own, then simply replace the blue part of the code with your button image URL (You must need to upload the button image to the server) .  That's all.


Tips:

There are six buttons I've prepared for you. If you wanna use any of them, simply click make a right click on any of them. Copy the image URL. I'm showing you the sample of second one below:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZj98J7dGO59yjgearAlvpIuteMJ8_0S5HaIBAh9WZljh6cfKhRYXodlNWTVovjHRVvhLXr9AoHnXmvJ80E3HlDedodatAR_FDLX5zhOnrLSP7l-BHlQzJbA8mXJIM3jjRh1HNlGz7J5XN/s1600/Top+2.png

Thus you can find the link of other buttons. Just click right button your mouse over the button you like, then copy the image URL. To make sure whether this is the right URL, paste it in a new tab of your browser to check whether the image is alright.


Remember, sometimes an image may got two links or URLs. One is Image URL and the other is Link URL. You should copy the image URL, not the Link URL. It also depends on your browser sometimes. For exaple, Internet Explorer will only let you copy the link URL. It shows - Copy shortcut. 


Caution:

While replacing the default button with your own you should  be careful enough:

  • Upload the image to a server which is fast and responsive
  • Never try to shorten the URL
  • Try to use the PNG format
  • Keep the image size as minimum as possible (But not at the cost of quality)
  • Don't try to replace any other part of the code if you don't have sufficient coding knowledge


6 comments:

  1. I remember, When I created a post which had have 2500 words and I published it. While reading it I realized that I have to search something in TOP zone, then I thought I should create a back to top button for navigation. This is what actually back to top button does. Nice post with nice button buddy...

    Regards,
    Divya @smtutorial

    ReplyDelete
    Replies
    1. Thanks for the comment. Whenever you need something, please have a look at Marks PC Solution. Don't forget to use the search box to find something.

      Delete
  2. Hello admin! Thank you so much for this :)

    ReplyDelete
  3. Replies
    1. Properly follow the instruction and don't try to change the code if you can't. Make sure you've added the code correctly.

      Delete