Pada tutorial kali ini kita akan
membahas bagaimana membuat tombol back to top di Blog dimana cara kerjanya
adalah tombol back to top atau tombol kembali keatas akan berfungsi dan
secara otomatis muncul untuk kita klik ketika isi artikel sudah melebihi batas
tinggi layar monitor, artinya tombol back to top akan muncul untuk
memfasilitasi artikel atau halaman yang sangat panjang. Dimana efek yang
digunakan adalah efek Bounce artinya efek seperti bola memantul, ketika
layar di gulung dan sudah sampai pada titik awal halaman, ada sedikit efek
seperti pantulan bola,
Berikut langkahnya :
1.
Pastikan Template Blogspot sudah memiliki
fasilitas Jquery. Anda bisa mengeceknya di HTM blog gunakan fasilitas pencarian
dan ketika jquery dan akan muncul script berikut
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'
type='text/javascript'/>
Kode diatas Artinya blogspot sudah memiliki
fasilitas jquery. Jika belum anda harus menambahkannya dan jika sudah next ke
langkah ke dua
2.
Buat Widget Baru Pilih HTML/JavaScript dan copy
script berikut
Kode HTML Java Script
<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/AVvXsEg3qUqGTVtg04bvj5ybbMcSm4qonOtHRLxyoZ1CSv6_-IesFf0lCsPi3V8ldctXOqeoOeux-x5OHbRf49woCWST5OdXJ4eqh5dL3_W0TBgLp4nILbFQAL8-MA3wCD1kx14qV3fHTx38vtt0/s1600/arrow-up_basic_blue.png'/></div>
3.
Selanjutnya Copy kode javascript jquery berikut diatas kode </head>
Script jquery
<!--script Jquery Scroll Back to
top-->
<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>
4.
Hasilnya akan tampak seperti berikut
Selamat Mencoba
No comments:
Post a Comment