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

komputersia -Tombol Back to top atau tombol kembali keatas merupakan tombol alternatif yang sanggup 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 sanggup berfungsi dikala 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 Lengkap Membuat Blog Safelink Blogger Dengan Benar Work 100%
• Cara Membuat dan Mengatur Custom Domain TLD Rumahweb Di Blogger
• Cara Membuat dan Mengatur Custom Domain TLD Dewaweb Di Blogger
• Cara Membuat Dan Mengatur SEO untuk Blog Baru .

Membuat Tombol Back To Top / Kembali Ke Atas

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

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

• Langkah pertama masuk ke bab edit template, kemudian cari instruksi </head> dan tempatkan instruksi berikut ini sempurna diatas instruksi </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 instruksi diatas, klik tombol save / simpan untuk menyimpan pengaturan
• Langkah selanjutnya silahkan kalian masuk pada bab menu Layout / Tata Letak, silahkan kalian klik add widget kemudian pilih HTML / JavaScript, kemudian copy instruksi 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BVTjzAMMfM8Pff3I1x9pn9Lx1_DWL1dkLGPm_APGNe0ac6QiNAXitThETTbWhSfS6L4ILQBADesP2HVXqIGBzcQk7d28ghHAilm01pdKdb6QO0yO7J3rJMQek0TcemNmtWwZvMibnjHI/s1600/arrow-up_basic_blue.png'/></div> 

• Jika Sudah, silahkan klik tombol simpan 

Baca Juga

6 Cara Memilih dan Mengganti Template Blog Agar Visitor Blog Terus Naik

2. Tombol Back To Top Efek Bounce atau Memantul

• Langkah pertama masuk ke bab edit template, kemudian cari kode </head> dan tempatkan instruksi berikut ini sempurna 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 instruksi diatas, klik tombol save / simpan untuk menyimpan pengaturan
• Langkah selanjutnya silahkan kalian masuk pada bab menu Layout / Tata Letak, silahkan kalian klik add widget kemudian pilih HTML / JavaScript, kemudian copy instruksi 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4BVTjzAMMfM8Pff3I1x9pn9Lx1_DWL1dkLGPm_APGNe0ac6QiNAXitThETTbWhSfS6L4ILQBADesP2HVXqIGBzcQk7d28ghHAilm01pdKdb6QO0yO7J3rJMQek0TcemNmtWwZvMibnjHI/s1600/arrow-up_basic_blue.png'/> </div> 

• Jika Sudah, silahkan klik tombol simpan 

Subscribe to receive free email updates: