Cara Membuat Back To Top Melayang Dipojok Kanan Bawah ala Kode Jarwo
Cara Membuat Back To Top Melayang Dipojok Kanan Bawah ala Bang Jarwo

Tujuan membuat tombol Back To Top sendiri yaitu agar memudahkan pengunjung untuk kembali ke menu navigasi blog di header tanpa harus scroll ketas. Cukup tekan satu tombol, sudah sampai di header.

Walaupun sudah banyak widget-widget Back To Top di internet, tetap Bang Jarwo buat juga, karena widget yang saya buat memiliki banyak kelebihan daripada yang biasanya ada di internet. Berikut kelebihannya:
  1. Pure CSS, tanpa Javascript
  2. Tidak mengganggu SEO (nofollow)
  3. Sangat-sangat ringan
  4. Tidak menimbulkan masalah Leverage Browser Caching
  5. Tidak memerlukan Font khusus
  6. Melayang di pojok kanan bawah
  7. Responsif, cocok dipakai di desktop dan mobile
  8. Desain yang elegan, karena menggunakan properties box-shadow

Langsung saja, berikut cara pembuatannya:

  • Pertama, masukkan kode CSS berikut diatas tag </head>

<style>#back-to-top p {box-shadow:0px 4px 12px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.24);border-radius:50%;position:fixed;z-index:1000;bottom:10px;right:10px;width:40px;height:40px;background:#fff;font-size:20px;font-weight:700;text-align:center;border:1px #4545 solid}</style>

  • Lalu, masukkan kode pemanggilnya yaitu dengan cara memasukkan kode ini diatas tag </body>

<a href='#' id='back-to-top' rel='nofollow'><p alt='Kembali Ke Atas' title='Kembali Ke Atas'>Δ</p></a>

  • Selesai, simpan template dan lihat hasilnya.

    1. Anda dapat mengganti kode yang berwarna  biru muda  dengan warna lainnya, disini saya membuat background tombol BTTnya putih.
    2. Anda juga dapat mengganti kode yang berwarna  hijau  dengan kode lainnya. Misal #header, maka bila tombol ditekan, anda akan diarahkan ke header, dan seterusnya. Atau, biarkan saja seperti itu.

      Bagaimana? Mudah saja bukan? Selamat mencoba... Oh ya jangan lupa, widget ini 100% buatan Bang Jarwo, tidak ada campur tangan orang lain, oleh karenanya bila ingin me-repost anda harus menyisipkan sumbernya.
      Silakan pilih sistem komentar anda ⇛   

      Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM, Fake Account, dan Flamming disini.

      Ozik Jarwo Kode Jarwo
      Ozik Jarwo author
      # 3 Oktober 2017 17.34

      Silakan

      Balas
      Sigit Prayogo Kode Jarwo
      Sigit Prayogo
      # 2 Oktober 2017 20.23

      Ijin coba mas

      Balas
      Ozik Jarwo Kode Jarwo
      Ozik Jarwo author
      # 4 September 2017 20.53

      :v

      Balas
      Robbi Rizaldi Chanel Kode Jarwo
      Robbi Rizaldi Chanel
      # 8 Juli 2017 14.17

      :v

      Balas
      Ozik Jarwo Kode Jarwo
      Ozik Jarwo author
      # 28 Mei 2017 16.57

      Silahkan

      Balas
      Blogcahti Kode Jarwo
      Blogcahti
      # 21 Mei 2017 13.01

      Keren mas bisa dicoba nih hehe

      Balas