Saturday, November 24, 2012

Scroll to Top Widget for Blogger

Add Stylish and Smooth Scroll to Top Widget to Blogger

This widget is using Jquery and CSS that looks very attractive while scrolling. This widget adds to some awesome user experience to your site viewers !


<<  Demo of this Widget  >>



Follow these Steps to Add this Stylish Scroll to Top Widget :-


Go To Blogger >> Select Template >> Edit HTML (Select Proceed and Expand Widget Templates ) >> And Paste the following code just before "</HEAD>" Tag


<!-- Go to Top Starts -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>


<!-- Smooth Jquery Go to Top Widget Ends by www.ebloggertips.com-->

<style type='text/css'>
#esg-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 #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("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() {
    $("#esg-StoTop").scrollToTop();
});
</script>
<a href='#' id='esg-StoTop' style='display:none;'>Back to Top</a>

<!-- Smooth Jquery Go to Top Widget Ends by www.ebloggertips.com-->



Hit Save and And that's IT >>
 
Still you get in Trouble ! Just comment Below we will fix your problems :)




 
Copyright © 2012-2013 ESG-Network - All Rights Reserved ∙ WebmastersTerms & PrivacySite MapAdvertise With Us
Posts RSSComments RSSBack to top ↑
Powered by Blogger