Januari 03, 2016

Membuat Efek Bounce pada Back to TOP




Bounce efek ini adalah seperti bola yang memantul dari bawah ke atas, pasti keren kalau blog anda memiliki efek seperti ini, efek ini telah saya gunakan di blog saya jadi kalok mau demo tinggal test saja langsung

Baca Juga :Dasar Sebuah HTML

1. hal pertama adalah membuat back to top itu sendiri, tetapi jika anda susah memilikinya langsung saja copy pastekan script berikut ini di atas </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#back-to-top').slideDown(200); } else { $('#back-to-top').slideUp(300); } });
$('#back-to-top').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
2. Seperti biasa ganti yang berwarna putih dengan id Back to top Anda

1. Cara Lainnya adalah ketika blog anda belum miliki widget back to top ini
2. Masuk tata letak lalu tambah widget masukan kode di bawah ini
<style type='text/css' scoped='scoped'>
#back-to-top{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none;height:60px;width:60px}
</style>
<div id='back-to-top'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHY-W8faKsLml5DcHotEWBvCFr-8q4s9ouxZrJK2rulkl5VN4dMFCqu1mLULbbh6W93bmR77U06X33crKVb0EfozPDM8esqwG2efxmToksJBTRuTjXrIyCMR3jSrFXcMGydUR-uPMWlF7q/s200/back-to-top.png'/></div> 
3. Masukkan code di bawah ini tepat di atas  </head>( code image bisa di ganti sesuka hati )
<style type='text/css' scoped='scoped'>
#back-to-top{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='back-to-top'><img alt='Back to top' src='URL Gambar Back to Top'/></div> 
Penting jika blog anda belum memiliki framework jquery copy pastekan di atas </head>


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



2 komentar

  1. keren bro, back to top kekinian hehe.. boleh dicoba nih...

    BalasHapus
  2. wah boleh di coab nih . nice

    BalasHapus

Semua bisa berkomentar di blog ini termasuk anonim, jadi gunakan kolom komentar di bawah dengan bijak, segala bentuk komentar yang bersifat merugikan akan di hapus oleh admin. Link error ataupun link rusak bisa menghibungi melalui Contact Us atau langsung berkomentar .

Blogger yang baik selalu menyempatkan berkomentar.


EmoticonEmoticon