komputerdia.com - 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
Sesuai dengan klarifikasi diatas, bahwa Fungsi utama dari tombol back to top yaitu sebagai tombol saluran cepat untuk menuju bab paling atas pada sebuah website atau blog. Dengan kata lain pengunjung sanggup lebih cepat mengakses halaman paling atas hanya dengan menekan tombol back to top yang tersedia pada blog tersebut
Sesuai dengan klarifikasi diatas, bahwa Fungsi utama dari tombol back to top yaitu sebagai tombol saluran cepat untuk menuju bab paling atas pada sebuah website atau blog. Dengan kata lain pengunjung sanggup lebih cepat mengakses halaman paling atas hanya dengan menekan tombol back to top yang tersedia pada blog tersebut
Biasanya tombol back to top atau tombol kembali keatas sanggup berfungsi saat 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 Artikel Menarik Lainnya :
- 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 arahan </head> dan tempatkan arahan berikut ini sempurna diatas arahan </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/j4vascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> <script type='text/j4vascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()} else { $('#ScrollToTop').fadeOut();}}); $('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700); return false})}); </script> - Jika telah kalian masukan arahan 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 arahan dibawah ini untuk dimasukan pada kotak html/j4vascript
<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/AVvXsEjbGdC2jpCyTplabB-UPC3338fWJP0-vFy5qRjgLeN0E_a1oddfGpuZ6j9DJGYNHoyfiTmU5bksKTzbx51BMr8FzfJM7OmKQbwfXmMw7xbd0MgeHHDsBV_KenscUk1vieaOj8UQlpF0Eizq/s1600/arrow-up_basic_blue.png'/></div> - Jika Sudah, silahkan klik tombol simpan
Baca Juga Artikel Terkait
2. Tombol Back To Top Efek Bounce atau Memantul
- Langkah pertama masuk ke bab edit template, kemudian cari kode </head> dan tempatkan arahan berikut ini sempurna diatas kode </head> . Untuk mempercepat pencarian silahkaan gunakan Ctrl+F
<script type='text/j4vascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/> <script type='text/j4vascript'> $(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 arahan 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 arahan dibawah ini untuk dimasukan pada kotak html/j4vascript
<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/AVvXsEjbGdC2jpCyTplabB-UPC3338fWJP0-vFy5qRjgLeN0E_a1oddfGpuZ6j9DJGYNHoyfiTmU5bksKTzbx51BMr8FzfJM7OmKQbwfXmMw7xbd0MgeHHDsBV_KenscUk1vieaOj8UQlpF0Eizq/s1600/arrow-up_basic_blue.png'/> </div> - Jika Sudah, silahkan klik tombol simpan