‘Add scroll to top widget’ to blogger or website.This widget makes the save of time to your visitors,if your blog page has long length in height.
you can see demo at my blogger at the right bottom below
You can add this widget for your blogger only in one part:-
1.Login to blogger->> Design or Template->> Edit Html
2.Now search </body> by using shortcut key ctrl+f
3.Now add the below code above </body>
<style type="text/css">
#mmb-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;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:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #000000;}
</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() {
$("#mmb-StoTop").scrollToTop();
});
</script>
<a href='#' id='mmb-StoTop' style='display:none;'>Scroll to Top </a> |
4.Save template and you are done.
@vasanthi
ReplyDeleteThank you very much and I wish all the best for you.