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.