Saturday, August 15, 2015

jquery Scroll back to top widget for blogger

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
<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=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);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(&quot;href&quot;);
    if ($(window).scrollTop() != &quot;0&quot;) {
        $(this).fadeIn(&quot;slow&quot;)
    }
    var scrollDiv = $(this);
    $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
$(function() {
    $(&quot;#MBB&quot;).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 !