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.
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.
ADD SCROLL TO TOP BUTTON TO YOUR BLOG
1). Open your blog and go to Dashboard.
</body>
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
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