Melihat dari efek yang ditampikan ini membuat saya tertarik untuk kembali men-share cara membuat tombol ini untuk anda . Nah jika anda ingin tau seperti apa hasilnya , mari kita buat dulu tombol back to topnya .
Aammm , sebelum membuatnya , sedikit penjelasan dulu dari fungsi tombol ini untuk blog anda .
Fungsi tombol Back To Top adalah untuk kembali ke halaman atas dengan sekali klik . Dan itu lebih mudah dan simpel ketimbang harus menggulir scroll mouse yang bisa terlalu lama kalau halaman tersebut penuh dengan komentar panjang .
Okelah daripada lama-lama ngejelasin yang malah bikin jadi gak jelas , langsung saja kita mulai membuatnya .
Silahkan masuk ke template Blog dan cari kode
</head>
Letakkan script dibawah ini tepat diatasnya
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Langkah selanjutnya , tempatkan script dibawah ini tepat di atas kode
</head>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').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>
Simpan TemplateLangkah ketiga ,
Buat widget baru dan pilih
HTML/JavaScript
Letakkan script ini di dalamnya
<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAhjZB1w1OAxZWzXccwFcqF_7cq9qSt3PtujKJDn3vjCZdFsj7Xf8fflSKkPBbFBFuKWD7mWqREVZTguQJ1m4YqXH8W2H7xITqOg-UDwsWEIAhN5L6W4hh9VWLOGXSuFFjENJItlPKk5Pc/s1600/arrow-up_basic_blue.png'/></div>
Langkah terakhir , simpan dan lihat di blog anda .
Untuk mencobanya , gulir kebawah halaman anda hingga tombol ini muncul . Kemudian klik . Dan lihat apa yang terjadi .
Berikan komentar anda tanpa menyisipkan tautan aktif. Terimakasih