Cara Membuat Tombol Back to Top dengan Efek Bounce ala Kang Ismet Pada Blog

Back To Top

Cara Membuat Tombol Back to Top dengan Efek Bounce ala Kang Ismet Pada Blog - Halo! lohaa semuanya selamat datang di Blog Billy-Art sebelumnya!  Pada kali ini Blog Billy-Art akan share cara Membuat Tombol Back to Top sebelumnya udah pada tau kan Tombol back to top itu apa?   tentunya udah pada tau kan dengan Efek Bounce?  yap bener banget memantul! untuk Demo Silahkan liat di Blog Ini Nah langsung aja tanpa basa basi lagi! cekidott.. 

1 Langsung masuk ke Blogger 

2. Kemudian Pilih Template > Edit HTML

3. Cari kode </head> (Gunakan CTRL + F untuk memudahkan pencarian), Lalu letakkan kode jQuery ini tepat diatas kode </head> 

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

*Lewati langkah ini jika blog agan sudah Terpasang kode jQuery

4. Letakkan lagi kode dibawah ini tepat diatas kode </head> 

<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.  Eiits, masih belom selesai!  Letakkan pula kode dibawah ini tepat diatas kode ]]></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. Sekarang Klik Simpan Template

7. Nah, Langkah terakhir masuk ke Tata Letak > Tambahkan Gadget > Lalu Pilih HTML/Javascript dan masukkan kode dibawah ini tepat didalamnya

<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>

*right:3px; adalah letak tombol Back to topnya, silahkan di edit (sempurnakan) sendiri. 

8. Simpan dan tarrara!  Lihat hasilnya! 

Sekian dulu pembelajaran kita tentang Cara Membuat Tombol Back to Top dengan Efek Bounce ala Kang Ismet semoga bermanfaat! see u next time gan! 

sumber

Tweet