Add Responsive Scroll To Top Button On Blog-spot Blogger

Add Responsive Scroll To Top Button On Blog-spot Blogger

Today We Share a Another Blogger Tricks; For Default & Custom Blogger Templates Users.?? This Tricks Will Help You To Adding Responsive Back To Top Button. If You Looking Best Custom Back To Top Button For Your Blog-spot Blog. Then Here is Your Article. Ha Ha.., ??

Add Responsive Scroll To Top Button On Blog-spot Blogger

So Friend Let's Following ??

Please Note*** This Tricks Is Personally Created & Tested. This Widget Built With CSS & JS.  So Be Carefully About Installing.?

First We Known About Back/Scroll to Top Button

Scroll To Top Button is a blog widget that  facilitate the visitors back to the top of the blog section. So, it's important to the that visitors don't bother to scroll up. Normally  Scroll to top  button appears in the footer or bottom of the blog page.

How To Add Scroll/Back To Top Button ??

Also Read : How Fix Ads Not Showing On Blogger Some Pages and Inside Blogger 100% Working

? First; Need To Be Add Below 'jQuery'  File On Above </head> Tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

If You Have Any jQuery File On Your Template Then Ignore/Pass This Step.

?Next Add Below JavaScript Code On Above </body> Tag .

<script type="text/javascript">/* Responsive Scroll To Top Button by webduniya */jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.wd-back-to-top').fadeIn(duration); } else { //websduniya.blogspot.com jQuery('.wd-back-to-top').fadeOut(duration); } });
jQuery('.wd-back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; })});</script>

?Now Add Below Code On Your Add Gadget Html/JavaScript Area.

Go to your Blogger Dashboard �� Layout �� Add a Gadget �� HTML/JavaScript.
Copy and paste the code below on HTML/JavaScript column.

<style>.wd-back-to-top { position: fixed; bottom: 2em; right: 10px; text-decoration: none; padding: 1em; display: none; cursor:pointer;}</style><img class="wd-back-to-top" src="Scroll To Top Image Url" />

Finally ; Now Replace  "Scroll To Top Image Url"

With Below Url.

https://i.imgur.com/Q6zia1a.png

Or

https://i.imgur.com/ATVfz7b.jpg

Finally ; Click To Save Them.????

Thank You For Reading Our Articles; Hope You Are Like This Post.?? If You Have Any Asking or Doubt About This Query Then Feel Free To Comment Below. We Will Responses Soon As Possible.??