How to install a bouncing effect back to top button into your blogger blog with jQuery UI - Back to top buttons are one of the best 'one click widget' for every blog. And in my previous article I was already provided to you a rocket effect back to top button for your blog. (you can also read that article by clicking on this link - Rocket back to top button for blogger). So today I'm going to show you how you can easily add a dynamic and bouncing effect back to top button on your blog with the help of some CSS and jQuery scripts. This back to top button is coming with some extra features and I think on the web, you will never see this "back to top button" before. (Now take a look of this back to top button by click on the below demo button.)
Now for those people who want to try this button on your own blog, please follow the below instructions.
Now for those people who want to try this button on your own blog, please follow the below instructions.
Setup jQuery Jumpy Effect Back To Top Button?
First login to your blogger dashboard - Login
Now go to the "Template" section and then click on the"Edit Template" button.
After that, find the below code by pressing "Ctrl + F" key together from your keyboard at the same time.
]]></b:skin>
And then copy the below CSS code and paste it just before ]]></b:skin>
/* Back to top */
#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:48px;height:45px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}
You can also edit the button size, simply edit the highlighted numbers according to your need.
Once again find the below code.
Once again find the below code.
</body>
After that, copy the below jQuery script and paste it just before </body>
<div id='easy-top'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});
//]]>
</script>
<script src='https://googledrive.com/host/0BxB51PrIeBaieEF2R2NhSUZzVGM' type='text/javascript'></script>
Now click on the orange save template button to apply the changes.
If you are facing any kinds of problem then you can ask me via comment section.
That's it! I hope you like this jumpy button! Stay tuned for more blogger widgets! Thanks for reading @Prince
0 Comment to "Jumpy Back To Top Button With jQuery UI"
Post a Comment