ADD SCROLL TO TOP WIDGET FOR BLOGGER

This tutorial I will sow how to add a smooth jquery scroll back to top widget to your blogger blog.  You can make your blog more users friendly by using this widget, because this scroll to top widget helps your blog reader to go top of your blog with a smooth scrolling. This widget scrolling effect is looks attractive. This widget is designed without any image. To know how is this widget sees our screenshot bellow or you can see this widget is working on my blog footer.  
 
  .  

 

How To  Add This Widget To Your Blogger Blog?

I presented this tutorial with some simple steps so, to add this widget just follow my simple instruction bellow.

• Access www.blogger.com>> Locate your Blog >> dashboard >> Template >> Edit HTML
• Search for </body> tag
• Add below codes before </body> ta

 <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://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.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>

      save your template
      you are done

      now you see scrolling in your blog
        thank you