How To Add Back To Top Button Widget In Blogger

Hi friends today I have brought all of you back for a great topic. Which you would love. Because it is important for all. For those who are creating a new website and for those who are old, it is also important for them. In today's post we will discuss about this How To Add Back To Top Button Widget In Blogger.

You might have seen that there is a button to go up right below the professorial website. Therefore, because as much of their visitor has no problem to go all over again. There will success be only those who will think for visitors. If you think for yourself then you are doing wrong.

Look at my blog only. When you go to the lower side, there will be a button to go up one on the right.Do you also want to put this widget on your blog like me?

If the answer is yes then I will teach you the complete process about it. So that nobody has any problem.

It's very easy. And simple too. It will look good to whatever comes in your website. And he will heart to come again . So let's then start guys.

How to install custom stats widget

Add Back To Top Button in Blogger

👉Go to Blogspot Dashboard. >> Edit Html >>

now Find </head> tag.

Copy 👇This code. And paste it above </head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Now SAVE TEMPLATE . You are 50% done..........

 Nw Back to Blogger. Click LAYOUT option. Now "Add Gadget" . Then click the HTML/JAVASCRIPT gadget.

Copy bellow back to top html code for blogger and paste it this content area box.👇

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8O4Hco-fLFvJskHVC3bM9gBULh2He4iQJp8ys6vj3PDvveGafuvXtRNa6o9t9KvGeAMhZWOLvQzF4voBg-5rDjaa4XSHmwBzXuACs4UDksBLHsKKWaxRtheHjYXTDWp4EvcWDMy9g4iY/s1600/2.+Back-To-Top+Button+-+Techtspot.png" alt="Back to Top" / ></a>

 Simply save this. You are done 100% 😋😋.👍

Bayna Fast Blogger Template Latest Version

Seo Optimization Tips 

Now all of you have come to know about it. I had already said that it is a very easy way to do that.If you ask me, I was also in first concern. But since I came to know about it, I was very happy.

If you have any problem, please let me know. I'll try to reply immediately.

How do you like this post? Please be sure to comment . And if anything comes, then share it in the social site. So that everyone can get help.

Bye friends I will share something new to you every day. take care of yourself. Have a great day..