Thursday

ADD jQUERY SCROLL TO TOP BUTTON FOR BLOGGER

We are serving our users the best, Today i will be telling you about a new gadget, specially for the users having lot of content on their blog pages, and if you want your users face no problem using your blog. You can add a scroll to top button on your blog at the any of the bottom corners, clicking on the button will scroll the page to the top automatically. Adding will make it easier and faster for your users to use your blog.



ADD SCROLL TO TOP BUTTON TO YOUR BLOG



1). Open your blog and go to Dashboard.

2). Select Layout and Edit HTML.


3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE

</body>


NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE

4). Paste 
the following code just above/before the code you have searched.


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


5). Save your template and experience the change in you blog 

If you got a good experience than leave comments and Email Me for any assistance.

No comments:

Post a Comment