Cara Membuat Tombol Back To Top / Kembali Ke Atas Dengan Efek Cantik

komputerdia.com - Tombol Back to top atau tombol kembali keatas merupakan tombol alternatif yang bisa kalian terapkan di blog dengan fungsi mengembalikan suatu halaman blog dari posisi bawah ke posisi atas, biasanya tombol back to top ini dipasangkan di samping bawah kanan atau kiri dari tampilan blog / website

Biasanya tombol back to top atau tombol kembali keatas dapat berfungsi ketika isi halaman suatu blog telah melebihi atau melewati garis batas suatu monitor, dan dengan otomatis tombol ini akan muncul. Jika kita klik tombol tersebut maka dengan otomatis kita akan diarahkan ke halaman paling atas pada suatu website / blog.

Baca Juga :

Cara Membuat Tombol Back To Top / Kembali Ke Atas Dengan Efek Cantik


Membuat Tombol Back To Top / Kembali Ke Atas

Dalam artikel kali ini, saya akan menjelaskan bagaimana Cara Membuat Tombol Back To Top / Kembali Ke Atas Dengan Efek Cantik yang bisa kalian terapkan di blog atau pun website, dan tentunya pemasangan ini tidaklah terlalu sulit. Berikut ini adalah beberapa jenis efek yang bisa kalian terapkan pada tombol back to top :

1. Tombol Back To Top Dengan Efek Menggeser / Menggulir Halus

  • Langkah pertama masuk ke bagian edit template, kemudian cari kode </head> dan tempatkan kode berikut ini tepat diatas kode </head> . Untuk mempercepat pencarian silahkaan gunakan Ctrl+F

    Keterangan :
    500 = Letak atau Posisi tombol yang kalian inginkan
    700 = Kecepatan untuk kembali keatas
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

<script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700); return false})}); </script>
  • Jika telah kalian masukan kode diatas, klik tombol save / simpan untuk menyimpan pengaturan
  • Langkah selanjutnya silahkan kalian masuk pada bagian menu Layout / Tata Letak, silahkan kalian klik add widget kemudian pilih HTML / JavaScript, kemudian copy kode dibawah ini untuk dimasukan pada kotak html/javascript
<style type='text/css' scoped='scoped'> #ScrollToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id='ScrollToTop'><img alt='Back to top' src='http://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div> 
    • Jika Sudah, silahkan klik tombol simpan 

    Baca Juga


    2. Tombol Back To Top Efek Bounce atau Memantul

    • Langkah pertama masuk ke bagian edit template, kemudian cari kode </head> dan tempatkan kode berikut ini tepat diatas kode </head> . Untuk mempercepat pencarian silahkaan gunakan Ctrl+F 
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> 

    <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>
    • Jika telah kalian masukan kode diatas, klik tombol save / simpan untuk menyimpan pengaturan
    • Langkah selanjutnya silahkan kalian masuk pada bagian menu Layout / Tata Letak, silahkan kalian klik add widget kemudian pilih HTML / JavaScript, kemudian copy kode dibawah ini untuk dimasukan pada kotak html/javascript
    <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://2.bp.blogspot.com/-MFhU3vLp5ho/UiaBZeA1McI/AAAAAAAAAQs/MrzW2ljP5mA/s1600/arrow-up_basic_blue.png'/></div>  
    • Jika Sudah, silahkan klik tombol simpan 

    .
    .

    Berlangganan Artikel terbaru (free):

    Post a Comment