Untuk memudahkan kita kembali kelaman atas setelah membaca artikel tanpa harus repot-repot scroll panjang pastinya kita membutuhkan tombol back to top atau kembali keatas... Dengan mengklik tombol icon back to top maka otomatis anda akan di diarahkan kembali kelaman judul artikel.
 |
| Back To Top |
Banyak template blog belum menerapkan atau memberikan tombol go to top dengan begitu kita harus membuatnya sendiri dengan cara menambahkan kode kedalam html.
Cara pemasangan tombol back to top di blog:
1. Masuk keblog
2. Dari dashboard blog pilih tema/template
3. Klik edit HTML
4. Cari code </head> [Ctrl+F]
5. Copy dan paste code di bawah di tepat diatas code </head>
Atau :5. Copy dan paste code di bawah di tepat diatas code </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>
<script type='text/javascript'>
<script type='text/javascript'>
6. jika sudah silahkan cari lagi code </body>
7. Copas code dibawah itu tepat diatasnya
Ket: # = biarkan begitu [abaikan]
hand-o-up = ganti dengan code font awesome dengan yang anda sukai
Tapi sebelumnya pastikan kode awesome sudah terpasang dalam template, jika belum silahkan pasang terlebih dahulu.
Baca: Cara Memasang Code Font Awesome di Website Blog
8. Masih dalam mode edit HTML dan tambahkan code CSS berikut dalam deretan code CSS Web blog anda
9. Simpan template dan lihat hasilnya..
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate({bottom:"25px"},10):t.animate({bottom:"-60px"},10)});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
</script>
<a href='#' id='BackToTop'><i class='fa fa-hand-o-up'/> Back to Top</a>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate({bottom:"25px"},10):t.animate({bottom:"-60px"},10)});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
</script>
<a href='#' id='BackToTop'><i class='fa fa-hand-o-up'/> Back to Top</a>
hand-o-up = ganti dengan code font awesome dengan yang anda sukai
Tapi sebelumnya pastikan kode awesome sudah terpasang dalam template, jika belum silahkan pasang terlebih dahulu.
Baca: Cara Memasang Code Font Awesome di Website Blog
8. Masih dalam mode edit HTML dan tambahkan code CSS berikut dalam deretan code CSS Web blog anda
/* CSS Back To Top */
#BackToTop {overflow:hidden;position:fixed;z-index:90;right:30px;bottom:31px;display:none;width:44px;height:44px;color:#fff;text-align:center;background-color:#363b40;font-size:22px;line-height:42px;cursor:pointer;-webkit-transform:translateZ(0);border-radius:2px;transition:all 0.5s;}
#BackToTop:hover {background-color:#263238;color:#fff;}
#BackToTop {overflow:hidden;position:fixed;z-index:90;right:30px;bottom:31px;display:none;width:44px;height:44px;color:#fff;text-align:center;background-color:#363b40;font-size:22px;line-height:42px;cursor:pointer;-webkit-transform:translateZ(0);border-radius:2px;transition:all 0.5s;}
#BackToTop:hover {background-color:#263238;color:#fff;}
9. Simpan template dan lihat hasilnya..
Jika code-code diatas telah anda terapkan sesuai apa yang saya jelaskan namun tombol klik back to top atau kembali ke atas tidak muncul silahkan hubungi saya dengan cara meninggalkan pesan komentar anda di laman ini. Terima kasih, semoga bermanfaat!