Back To Top Button for Blogger (Exclusive!)

Hi Blogger, today I've come with an exclusive widget for you. Most of you may already got the idea that what I'm going to discuss in this post. Yes your guess is correct, in this post I'm gonna show how to add Back to Top button in Blogger. As most of us know Back to Top or Scroll to Top button is a widget that that allows the website visitors move to top just by one click. Normally visitors scroll top to bottom of a site to surf the whole webpage. So, this Back to Top button is very helpful to navigate a site. Have a look at the button shown in the image below.

The button shown in the image above is the default button of the script that I'm sharing. When you will add this widget to your blog the back to top button will be available at  bottom right corner of your webpage. Visitors need to scroll down a little bit and then the scroll to top button will appear. If you are blogging on Blogger platform then you can add this widget to your blog by HTML/JavaScript gadget. I'm sharing a few buttons, you can use anyone of them or you can use button of your own choice. Let's see the procedure...

• First Sign into your Blogger Account and go to Dashboard.

• Then click on Layout option and click Add a Gadget link from anywhere.

• Then from the gadget list choose HTML/JavaScript.

• Now Paste the following code inside the HTML/JavaScript content box.

 <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-CMY5FaPgybQQ2konayRJ2msDsWIUkOefdZBNqtECnzcL0Gu65Sos_zkV9UVDQdMbnC4jwuqxzp3mSIbYLF4QmH98hin-XIF4HSMZpG6_5FusDQmd7ElJBeNXTGOmxQIKQtkyFs0GB7Zw/s1600/Top+4.png'/></a>  

• Finally click on Save button to complete the process.

Customizing the Button:

To change the back to top button you will have to change the button's image URL in the widget's code. At the bottom of the code the blue line is button's image URL. To use your own created button first you will have to upload the button's image to a server and then copy and replace the blue part of the code with your button image URL.

Extra Tips: As you can see above that I've also share seven more button for your. You can use anyone of them. To do so right click on any of them and Copy the image URL and Paste it in place of image URL in the code above. As an example below I'm presenting the URL of the number seventh image.


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBgtdbQzzmT0gxABTPY_wQllhSDGZHrh1DQHUSL4Qaa3Nu_nlFgVRj28zpx44jhdvETr5aWhSP5hjT6yJUf6cekX_A3bu9xbE-acWB9-xNt2UgnmvYGA7ZdpBkZN09QWhnOuKvwoA23Brs/s1600/BackToTop-7.png

I have shown the example of the image URL so that you can find the correct URL of the button's image. As because there a image might have tow URL. So, the correct URL will be like the URL shown in the above. To check whether the URL is correct or not paste it in a new tab of your browser  and press Enter. If the URL is correct then you will see the image immediately.

Stay with www.iTTimesbd.com for more IT related post