Post Game

Cara Membuat Back To Top Seperti Kang Ismet

Cara Membuat Back To Top Seperti Kang Ismet

Bounce To Top | Pada kesempatan kali ini saya akan membagikan back to top mirip dengan blog.kangismet.net dan cara ini sudah saya praktekan di blog ini. Keunggulannya adalah sama sekali mempengaruhi loading blog sobat.

Berikut Tutorialnya

Langkah 1 : Simpan kode jQuery di atas </head>
 

<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js/>

Langkah 2 : Simpan kode CSS di atas ]]></b:skin>
 

/* Bounce To Top Microsoft Cyber */

#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;}

Langkah 3 : Letakan kode berikut diatas </head>

<script type=text/javascript>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;500) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#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>

Langkah 4 : Letakan kode diatas kode </body>

<div id=BounceToTop/>

Langkah 5 : Buat widget baru HTML/JavaScript, simpan kode ini

<style type=text/css scoped=scoped>
#BounceToTop{position:fixed;bottom:6px;right:6px;cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: none;"></div>

Edit posisi :

• Bottom : Jarak dari Bawah
• Right : Jarak dari kanan

Semoga Bermanfaat .... !!

Go to link Download