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.

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. 

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

Stay with Stay with Marks PC Solution . . .