This tutorial is about scroll button that can easily get you to the top of the page.If your post is to large or on this page you have lots of comments that makes your page to long for your visitors to finish or get to top and also it give little cool touch to your blog.It is very easy to make this just follow the few easy and simple steps and make your blog more stylish.Step 1
Login to your blogger account dashboard and click on Design.
Step 2
Then Edit HTML after this check Expand Widget templates box.Press CTRL+F to find the following code.
</body>
Step 3
Copy the following code and paste it before this code and savethe template.
<style type="text/css">
#amazi {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #cococo;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:700px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() != "0") {
$(this).fadeIn("slow")
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == "0") {
$(scrollDiv).fadeOut("slow")
} else {
$(scrollDiv).fadeIn("slow")
}
});
$(this).click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow")
})
}
});
$(function() {
$("#amazi").scrollToTop();
});
</script>
<a href='#' id='amazi' style='display:none;'>Back to Top </a>