This
toturial is i will show you how to add jquery smooth scroll back to top
button for blogger you can go direct top from blogger footer lets go
see how to aad this gadget to your blog the gadget is designed with only
text not by image you can see screenshot on below
1. Go to your blog account and sign in there with your email and password
2. Now go to this location "Dashboard > Templates > Edit HTML"
3. Search for </body> tag
4. Add below code just before </body> tag
5. Now save your templates and you are has been successfully done !
1. Go to your blog account and sign in there with your email and password
2. Now go to this location "Dashboard > Templates > Edit HTML"
3. Search for </body> tag
4. Add below code just before </body> tag
<style type='text/css'>
#MBB {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#FFD45D;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://kedar-adhikari.googlecode.com/svn/scroll_Top.js' type='text/javascript'/>
<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() {
$("#MBB").scrollToTop();
});
</script>
<a href='#' id='MBB' style='display:none;'>Scroll to Top </a>
#MBB {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#FFD45D;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src='https://kedar-adhikari.googlecode.com/svn/scroll_Top.js' type='text/javascript'/>
<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() {
$("#MBB").scrollToTop();
});
</script>
<a href='#' id='MBB' style='display:none;'>Scroll to Top </a>
5. Now save your templates and you are has been successfully done !