3 Apr 2016

Make Back To Top With Bounce effect For Blogger Like Kang Ismet | 2016

How to Make Back To Top Button With Bounce Effects 2014 | Make a back to top button already been described within the blog - other blogs, especially diarys ismet kang I got it when blogwalking and searching and searching to seek out it. this point I added the code again to resemble the blog back to top ismet kang. How its almost constant way because the one on his blog kang ismet there could also be a rather different steps. 
sighting back to his top form buttons with simple and attractive design which will be more or less tolerable as shown below / during this blog if are often tough.

The image I get from this blog alone

How interested would like to make it like that ..?
Let's just go ahead and just follow the step by step and note Thoroughly

1. Login respective blogger buddy
2. From the dashboard just go to Menu Templates and Select EDIT HTML
3. Add the following code above the code </ head> lah use CTRL + F to quickly find
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
If there's been the same code in the template attached agan this step should be avoided 

4. Still with the code </ head> add the following code right above it
<script type='text/javascript'>$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } });$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

5. This time we make tampilanya Kang Ismet closely as hers. Put the following code just above the code  ]]> </ b: skin>
 #BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;}
#BounceToTop:hover {background:#2a3542;}
#BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;}
#BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border-color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;}
#BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}

6. Now to the Layout and Add Widgets Choose HTML / Java Script and copy the code below and paste it into it
<style type='text/css' scoped='scoped'>#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}</style><div id="BounceToTop" style="display: block;"></div>

7. Done Now In How check result ..?. If it fails let's discuss where lies the fault. If you think this agan still less can we discuss it. A few of my hopefully useful tutorial. Thanks to Kang ISMET

Source:- http://blog.kangismet.net/2013/09/membuat-tombol-back-to-top-dengan-efek-bounce.html



No comments:

Post a Comment

Ads Inside Post