Saturday, December 12, 2015

How to add 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 !

Related Posts:

  • How to install gadgets on your desktop?Do you want to put some gadgets on your desktop if you want to do this.And want to maker your computer desktop colorful. The  desktop the you showing below is of my so if you want to change your desktop like this than fo… Read More
  • How to add Jquery Scroll back to top widget for bloggerThis 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 n… Read More

0 comments:

Post a Comment