بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BOUNCE atau memantul sering digunakan sebagai istilah dalam berbagi topik ulasan. Bounce rate, atau rata-rata pantulan juga digunakan dalam istilah pengunjung yang datang dan langsung pergi. Begitu juga dalam penerapan Back To Top kita juga bisa menggunakan istilah Bounce Back To Top. Dan kali ini kita menggunakan JQuery, bahasa pemrograman web yaitu Javascript yang terbilang handal.
Biasanya efek Back To Top adalah menggunakan opacity, yaitu ketika kita scroll kebawah maka tombol back to top ini akan segera muncul di sudut kanan bawah halaman display blog. Tetapi ketika kita klik, maka halaman akan scroll ke atas dan tombol back to top ini akan memudar dan menghilang. Sebenarnya tidak menghilang, tapi karena opacity, membuat item back to top tersamarkan hingga tidak terlihat.
Baca Juga :
Fungsi dari back to top tidak lain adalah untuk mempercepat menggulir halaman ketika sampai kebawah dan ingin kembali ke halaman atas dengan cepat. Dengan sekali klik, maka halaman atas akan kita sambut dan dapat kita lihat pada layar blog kita. Mempermudah scroll, itulah fungsi utamanya dari back to top. Karena tanpa tombol ini kita akan scroll manual dengan menggeser bilah kanan browser dan itu tidaklah efektif dalam pengerjaan blog.
Okelah sekarang kita langsung saja ke pokok bahasan kita yaitu :
1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML
4. Temukan kode ini dalam template. </head>. Setelah ketemu tempelkan kode dibawah ini persis diatas kode </head> tadi.
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#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>Catatan :
Untuk menampilkan efek bounce atau memantul mesti ditambahi dengan JQuery berikut ini
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
Setelah itu baru kemudian kita tempelkan lagi kode dibawah ini di :
Tata Letak - Tambah Gadget - Halaman HTML/Javascript Kalian pasti sudah paham ini letaknya dimana. Kodenya dibawah ini
<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/AVvXsEj_Y2LhxwNDlY80WTASFnIenAD72wZVUMal5JVmKA4pnTcORSb3BkhM7gtPPw-TWEC_OWKxOI7DHFjl9HbNwbykjJLTWk2e76dc8hvvybIzzL7jLe-yB4cC6nGaewFalVwO_tZGSMTlkkZ0/s1600/back-to-top.png'/></div>Nah sudah selesai teman-teman. Sekarang waktunya bilang Alhamdulillah. Sudah disave saja dan publish. Pasti sudah ada itu efek memantulnya ketika kita klik Back To Topnya. Sekian tutorial yang dapat disampaikan. Terima kasih dan Salam Blogger. Tidak ada Gading yang tak retak. Tidak ada hal yang sempurna. Tapi kita berusaha membuat hal yang tidak sempurna menjadi sempurna dengan usaha dan kerja keras.
Label Postingan :
Javascript
,
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Membuat Efek Bounce Memantul pada Tombol Back To Top . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
