Membuat Tombol Back to Top di Blogger

Floating "Back to Top" button

Sebenarnya saya jarang membuat artikel yang panjang, jadi sebelumnya tidak pernah berminat menggunakan tombol melayang untuk "Back to top". Biasanya sih cukup dengan membuat sebuah tautan menuju "#" di dasar halaman blog.
Sayangnya, tautan di dasar laman blog tentu saja hanya bisa diakses ketika si pembaca telah mencapai dasar halaman blog. Jika ternyata ketika di tengah artikel dia ingin kembali ke atas halaman, tidak ada cara baginya selain menggulung sampai atas. That's a bad user experience.

User experience adalah yang utama, dan navigasi halaman blog sangat berperan di dalamnya. Jadi walaupun kita jarang berpanjang lebar dalam menulis artikel, namun sebuah alat yang memudahkan pembaca mengakses navigasi blog sangatlah penting. Alat ini umumnya berupa sebuah tombol melayang (floating button) untuk mengantar pembaca kembali ke bagian atas halaman di mana navigasi blog umumnya diletakkan.

Baiklah, dalam artikel kali ini saya akan menjabarkan bagaimana membuat floating back to top button. Bukan hanya satu, melainkan dua jenis sekaligus. Yang satu menggunakan javascript dan CSS, dan satu lagi hanya menggunakan CSS. Tentu dengan kelebihan dan kekurangan masing-masing yang nanti juga akan saya jelaskan. Mari...

Tombol "Back to Top" menggunakan javascript dan CSS

Tombol jenis pertama ini tidak tampak pada bagian paling atas halaman, dan hanya akan muncul setelah pembaca menggeser sekian bagian halaman ke bawah.

  • Login ke Blogger
  • Pada menu di sebelah kiri, klik THEME
  • Di sebelah kanan, di bawah bagian "Live on Blog", klik Edit HTML dan salin skrip berikut:
    • Tambahkan CSS berikut di bagian <head>: 
      .back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 7px;
  z-index: 100;
}
    • Tambahkan skrip berikut di bagian bawah tepat di atas </body>: 
      <a class='back-to-top' href='#'>
  <svg height='60' viewbox='0 0 1792 1792' width='60' xmlns='http://www.w3.org/2000/svg'>
    <path d='M1293 1139l102-102q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l307-307 307 307q19 19 45 19t45-19zm371-243q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z' fill='red'>
      <title>
        Back to Top
      </title>
    </path>
  </svg>
</a>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script>
  jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
      } else {
        jQuery('.back-to-top').fadeOut(duration);
      }
    });
    jQuery('.back-to-top').click(function(event) {
      event.preventDefault();
      jQuery('html, body').animate({scrollTop: 0}, duration);
      return false;
    })
  });
</script>

      offset adalah jarak (dalam pixel) dari puncak halaman ke bagian yang telah digulung (scrolled) oleh pembaca. duration adalah seberapa lama kita menginginkan efek gulung untuk tampil.

  • Klik Save theme

Cara kerja skripnya sederhana saja; ketika pembaca membuka laman, tombolnya tidak akan tampak. Setelah pembaca menggulung sebanyak offset ke bawah, tombol pun akan muncul di pojok kanan bawah dengan durasi efek fade in dan fade out selama duration detik.
Tombolnya sendiri berupa embedded svg. Ukurannya bisa diatur dengan mengubah nilai height dan width yang asalinya 60 pixel.
Warna tombol dapat diatur pada bagian fill dalam embedded svg.

Tombol "Back to Top" dengan menggunakan javascript dan CSS ini lumayan menarik. Namun ia memiliki dua kelemahan yang membuat saya enggan menggunakannya:

  1. Karena bergantung javascript, efek tidak akan jalan ketika pembaca mematikan javascript di perambannya.
  2. Tidak bisa menggunakan <async> atau <defer> untuk memuat skrip jquery.min.js.
    Well, sebenarnya masih bisa menggunakan <async> atau <defer> asal baris <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> dipindahkan ke bagian <head>. Bagaimanapun, skrip akan menjadi blocking karena tidak bisa dimuat secara asyncronous.

Terutama karena alasan nomor 2 itulah akhirnya saya lebih memilih tombol "Back to Top" statis tanpa animasi.

Tombol "Back to Top" menggunakan CSS



Tombol ini akan selalu tampak di pojok kanan bawah halaman. Tidak akan terlalu mengganggu karena kita membuatnya tembus pandang sehingga teks artikel masih tetap tampak.

  • Login ke Blogger
  • Pada menu di sebelah kiri, klik THEME
  • Di sebelah kanan, di bawah bagian "Live on Blog", klik Edit HTML dan salin skrip berikut:
    • Tambahkan CSS berikut di bagian <head>: 
      #tothetopbtn {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 7px;
  z-index: 100;
  fill-opacity: .36;
  transition: fill-opacity .3s ease-out;
}
#tothetopbtn:hover {
  fill-opacity: 1;
}
    • Tambahkan skrip berikut di bagian bawah tepat di atas </body>: 
      <a id='tothetopbtn' href='#'>
  <svg height='60' viewbox='0 0 1792 1792' width='60' xmlns='http://www.w3.org/2000/svg'>
    <path d='M1293 1139l102-102q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l307-307 307 307q19 19 45 19t45-19zm371-243q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z' fill='red'>
      <title>
        Back to Top
      </title>
    </path>
  </svg>
</a>
  • Klik Save theme

Ketika pembaca membuka laman, dia akan langsung disuguhi sebuah tombol "Back to Top" di pojok kanan bawah. Tombol ini akan selalu tampak. Karenanya, agar tidak mengganggu kenyamanan membaca, kita buat tombol ini selalu tembus pandang kecuali ketika pembaca melayangkan penunjuk tetikus (mouse pointer) ke atasnya.

Tingkat kesamaran (opacity) tombol ini dapat diatur pada CSS fill-opacity yang asalinya 0,36 atau 36%. Laju perubahan opacity dapat diubah pada CSS transition yang asalinya adalah 0,3 detik.
Sifat-sifat tombol seperti tinggi, lebar dan warna dapat diatur pada bagian embedded svg, dengan mengubah nilai height, width yang asalinya 60 pixel dan fill yang asalinya berwarna red atau merah.


Demikian. Cara manapun yang dipilih tidak menjadi masalah, yang penting navigasi halaman bagi pembaca artikel blog kita dimudahkan. Bahkan sebuah tautan menggunakan <a href="#">Back to Top<a> pun masih lebih baik dari pada tidak ada sama sekali.

Labels:

4 komentar:

  1. anonimus16/09/17, 01.18

    Cara kedua lebih baik menurut saya, nggak perlu jQuery

    BalasHapus
    Balasan
    1. Admin16/09/17, 02.05

      Wah, ga nyangka ada yang komen dini hari gini 😅
      BTW, sedang belajar embed video nih. Tadinya dikira bawaan blogger yang jelek, ternyata memang rasio rekamannya yang jelek. Cocoknya 16:9.

      Hapus
  2. Anonim19/09/17, 08.44

    BTW itu rekam gifnya pake apaan ya ?

    BalasHapus
    Balasan
    1. Admin21/09/17, 07.13

      Itu direkam di GNU/Linux menggunakan SimpleScreenRecorder terus videonya diunggah ke gfycat.com.
      Gfycat.com inilah yang mengonversi video menjadi gif, sekalian bisa embed ke Blogger.

      Hapus

Langganan: Posting Komentar (Atom)
Kembali ke atas