11.4.14

Cara Membuat Tombol Back To Top / Tombol Kembali Keatas

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.

√ - 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 script 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='http://4.bp.blogspot.com/-tq9iYW3L-E0/UwyGmT28eoI/AAAAAAAACLk/jCw1wcRL8GA/s1600/back-to-top.png'/></div>

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.

→ About the author

Moch Adnan adalah Admin Blog yang mempunyai ketertarikan dengan Dunia Blogging,kamu bisa Menemukan saya dan memfollow saya di Google + Twitter Facebook


Terima Kasih Telah Membaca Artikel Cara Membuat Tombol Back To Top / Tombol Kembali Keatas . Jika Anda tertarik dengan artikel seperti ini, silahkan untuk berlangganan artikel Gratis dengan cara mengetikkan alamat e-mail anda pada kotak berlangganan berikut:
Subscribe via Email

2 komentar

kok gak tampil ya di blog saya sob

coba ulang lg sob, takutnya ada kode yg gak ke copy

Silahkan tinggalkan komentarnya
Mohon untuk tidak memasukkan link hidup dalam berkomentar