You are here: Home » featured , internet updates , scroll to top widget , widgets » Add Scroll to top Widget to your Blog/Website

Add Scroll to top Widget to your Blog/Website

By mayank gupta on Monday, 7 November 2011 0 comments

Hey guys today i will tell you how to add a scrolling 'scroll to top' widget for your blog in just few easy steps with the help of Jquery.

Log in to your blogger account.
Click on Design and then go to Edit HTML.
Backup your template.
Press Ctrl+F and search for </body>
Just before </body> paste the below code.

<style type="text/css"> #w2b-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><br /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><br /> <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() {         $("#w2b-StoTop").scrollToTop();     }); </script><br /> <a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>

Click on Preview before applying any changes.When satisfied click on save template.

Hope with the help of these easy steps you will be able to get your own scrolling widget.

If you liked our post do share the stuff.

Category: featured , internet updates , scroll to top widget , widgets

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)