How to add the Back to Top button to the blog?

Back to Top Button is an important part of blog or website. It makes a website attractive as it makes it easier for visitors to see all the pages of your web site. It was a lot of time that a lot of comments on your blog posts a lot, but when the visitor read your post, a lot of pages went down. At that time the visitor took a long time to come back. As a result, the visitor was annoyed once and again to come up again. But if you add a little back to top button, the visitor will be able to come to your page headers with just one click. I'm posting to the Back to Top button today, this is not an image created by it. It is fully integrated with CSS3 and JavaScript. It has two color effects. Normally, one kind of color show will be displayed, and after the mouse is in the form of a mouse, it will show another type of color. It can be moved very smoothly using it. Take a demo through the photo below or you can see its demo if you notice it at the bottom right of my blog.

How to add: To add it, you will not have any different ideas about your web design. Those who did not do the basement on any day, can easily get it added.

• First log in to your Blogger account.
• Then go to your blog's dashboard.
• Now from the Layout option on the left side, click on Add a Gadget.
• Then click on HTML / JavaScript.
• Now copy the code below and paste it into the HTML / JavaScript box.

[code start] <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<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: 35px;
   right: 10px;
   text-decoration: none;
   width: 10px;
   height: 20px;
   background-color: #007ABE;
   background-image: url("https://4.bp.blogspot.com/-80MHDTM3XRQ/VSPMSNa4fTI/AAAAAAAAD8w/e2Mktw2DY8Q/s1600/up.png");
   background-repeat: no-repeat;
   background-position: 50% 50%;
   border-radius: 2px 2px 2px 2px;
   font-size: 12px;
   padding: 1em;
   display: none;
}
.back-to-top:hover {
   background-color:#000000;
   text-decoration: none;
}
</style>
<a href="#" class="back-to-top" title="Scroll to Top" /></a> [code end]

• Now click Save and then Ok

Admin

About Writer
Nothing to say
Follow her @ Twitter | Facebook | Google+