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 :#
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; }
$(function () { $(window).scroll(function () { $(this).scrollTop() > 100 ? $(".backtotop").fadeIn() : $(".backtotop").fadeOut(); }), $(".backtotop").click(function () { return $("html,body").animate({ scrollTop: 0 }, 400), !1; }); });
<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 Tema8. 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 :#