Blog

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://2.bp.blogspot.com/-4hWWhjp-IwE/VojzA2DPuNI/AAAAAAAAAq4/n3sWwaDVKwg/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 Comment(s)

  1. Eight Blogger
    January 3, 2016

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

  2. Yustin
    January 3, 2016

    wah boleh di coab nih . nice

Write a comment