Cara Membuat Back To Top di Blog

Halo sobat KodeRian pada kesempatan kali ini saya akan membagikan sebuah Tutorial untuk Blogger yaitu "Back To Top" meski terlihat sederhana tapi fungsinya sangat besar karena mempermudah pengujung untuk kembali lagi ke atas agar menghemat waktu tidak ada scroll ke atas secara bersekala.

Back To Top sendiri merupakan umpan balik ke atas supaya mempermudah pengujung agar tidak melakukan Scroll secara sia-sia dan lama karena dengan fitur ini sangat menguntungkan sekali bagi pembaca agar menghemat waktu terutama untuk melihat Menu Navigasi yang tidak Sticky atau Melayang.

Bagaimana tampilan nya ? mungkin itu yang ingin diketahui oleh kalian bukan ? daripada penasaran coba di cek dulu "Demo" untuk "Back To Top" tersebut dibawah :#

See the Pen
Back To Top SVG by Rian_kuno (@rian_kuno)
on CodePen.

Untuk menambahkan ke "Blogger" kalian tinggal ikuti langkah dibawah ini

Cara Membuat Back To Top di Blog

1. Buka Blogger
2. Klik Tema > Klik "Edit HTML"
3. Tambahkan kode berikut tepat dibawah kode <style> atau <b:skin>

.backtotop {
  display: none;
  background: #3c6382;
  color: #fff;
  font-size: 1.4em;
  width: 40px;
  height: 40px;
  line-height: 40px;
  outline: 0;
  z-index: 999;
  bottom: 20px;
  right: 20px;
  position: fixed;
  border-radius: 5px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  opacity: 1;
  transition: all 0.25s;
}
.backtotop svg {
  width: 24px;
  height: 24px;
  transform: rotate(90deg);
  vertical-align: middle;
  transition: all 0.25s;
}
.backtotop:hover {
  background: #0a3d62;
}

5. Tambahkan kode berikut tepat dibawah kode <script>

$(function () {
  $(window).scroll(function () {
    $(this).scrollTop() > 100
      ? $(".backtotop").fadeIn()
      : $(".backtotop").fadeOut();
  }),
    $(".backtotop").click(function () {
      return $("html,body").animate({ scrollTop: 0 }, 400), !1;
    });
});

6. Tambahkan kode berikut tepat diatas kode </body>

  <div class='backtotop hide'><svg viewBox='0 0 24 24'>
      <path d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z' fill='#fff' />
    </svg></div>

7. Simpan Tema
8. Selesai

Bagaimana hasilnya ? sama bukan dengan yang tampilan "Demo" tampilan nya sederhana tapi menarik mata kalian :3

Sampai disini saja dulu dan artikel pada blog ini akan terus saya update Setiap Hari meskipun cuman Satu atau Dua saja tapi itu lebih baik daripada Tidak :#