Penulis: Moch Adnan dipublikasikan: 11 April 2014

Cara membuat tombol back to top / tombol kembali keatas

Sobat netter yang berbahagia, kali ini saya akan berbagi sebuah tutorial tentang cara membuat tombol back to top atau tombol kembali keatas setelah selesai memscroll keseluruhan Isi artikel. Tombol ini (back to top) biasa terlihat pada bagian bawah web dan bentuknya pun beraneka jenisnya, ada yang melayang dan ada pula yang tidak. Dan pada tutorial kali ini saya akan memberikan tutorial singkat tentang cara membuat tombol back to top melayang dengan sentuhan jquery hingga menghasilkan kehalusan ketika tombol ini tersentuh.

Setelah sebelumnya saya juga sudah memposting tentang cara membuat slider sederhana untuk blog, serta cara menambahkan beberapa penulis blog, maka kini saya coba melanjutkan dengan tutorial blog kali ini. Oke tanpa berpanjang lebar lagi langsung saja pada cara pembuatan tombol back to top tersebut dan untuk sobat yang ingin coba membuat silahkan ikuti langkah-langkah cara pembuatannya berikut ini.
Cara Membuat Tombol Back To Top / Tombol Kembali Keatas

Cara Membuat Tombol Back To Top / Tombol Kembali Keatas

√ - Login ke dalam dasbor blog, lalu pilih 'template'.

√ - Pilih 'edit html' lalu copy dan pastekan kode berikut ini tepat diatas kode </head>

   <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>

Gunakan pencarian cepat dengan menekan tombol ctrl+f guna menemukan kode yang anda cari.

√ - Tambahkan juga kode jquery berikut ini di atas kode </head> untuk memberi efek halus tatkala tombol back to top ini tersentuh.

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

Klik 'simpan template' lalu pilih 'tata letak'

√ - Terakhir pilih 'gadget' dan pilih menambahkan gadget baru, setelah itu masukkan kode CSS dan HTML berikut kedalam gadget HTML 


    <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/AVvXsEiL1tRZ3pkypu-_nkH_12BJx5pwAVZK0XIMVZA9m1284Pyju0Z9gTCcjhnjyJpQ2OHLbeq60Dngjg5ibqL5FWTQ5XpjoUjiVRap44ms45GR0WN7dyQP70INltcGxiMEefSTsZSUWueHFWHm/s1600/back-to-top.png'/></div>

Untuk mengganti tampilan gambar silakan ubah url yang sengaja saya warnai merah. 

Demikian saja tutorial singkat dari saya tentang cara membuat tombol back to top atau tombol untuk menscroll kembali keatas dalam blog atau web semoga bermanfaat. Selamat mencoba dan salam blogger.