jquery Stylish smooth scroll back to top widget for blogger

PUT YOUR PARSED ADSENSE CODE HERE

jquery Stylish smooth scroll back 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 below 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 Successfully Done!

Now You Will See Floating Smooth scroll back to top Button In Your Blog. 
Enjoy It! and Leave your Comments and Responses with us.

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!