Langsung ke konten utama

Highlight Post

Sejarah Kenapa 'K' Jadi Singkatan Ribu?

Saya pertama kali tau singkatan "K" ini sekitar 5 tahun lalu dan saya kira datang dari bahasa gaul dan ternyata ada sejarahnya yaitu berasal dari bahasa Yunani 'chilioi' yang berarti ribuan. 10K, 200K, 50K itu adalah angka-angka yang kerap kali ditemui ketika berbelanja. Tahukah Anda apa arti satuan 'K' di belakang angka tersebut? Huruf 'K' menjadi penting karena huruf itu merupakan pengganti ribu saat menyebutkan harga atau jumlah. Lalu, kenapa 'K' bisa mempunyai arti tersebut? Usut punya usut, Dikutip dari laman Merriam-Webster, satuan 'K' memiliki kepanjangan kilo. Kilo digunakan sebagai unit pengukuran dalam Sistem Satuan Internasional atau SI (Système international d'unités). Misalnya dalam mengukur jarak, 1 kilometer sama dengan 1.000 meter. Sedangkan untuk mengukur berat, 1 kilogram sama dengan 1.000 gram. Kata kilo berasal dari bahasa Yunani 'chilioi' yang berarti ribuan, digunakan untuk menyatakan banyak atau jamak.
💬

Cara Membuat Jump/Back to Top untuk Halaman Web/Blog

Cara Membuat Jump/Back to Top untuk Halaman Web/Blog

Jump/Back to Top adalah tombol yang biasanya dipasang pada bagian paling bawah website/blog dan ada juga yang memasangnya mengikuti scrolling mengambang yang tujuannya sama jika di tap/klik akan meloncat ke bagian konten paling atas untuk menghemat waktu scrolling.

Ada berbagai macam cara memasang Jump/Back to Top pada Blog mulai dari menggunakan element class id/name hingga dengan atau tanpa Javascript.

Perbedaannya mungkin, jika pakai atribut link setelah di klik akan loading dan pakai JS tidak.

Untuk pemasangan menggunakan element class id/name biasanya dipasang dengan kode seperti berikut.

Batasnya:
<a name="top"/> atau <div id="top"/>

Linknya, jika di klik akan meloncat pada batas yang ditentukan diatas.
<a href="#top">Top</a>

Sedangkan dengan Javascript.

Perlu memasang JS berikut:
<script>//<![CDATA[ 
var tops = document.getElementById("top");tops.onclick = function(){document.body.scrollTop = 0;document.documentElement.scrollTop = 0;} 
//]]></script>

Pasang JS diatas pada bagian paling bawah dalam Template diatasnya </body>, biasanya begitu khusus JS perlu dipasang pada bagian paling bawah agar mendapat proses render terakhir bertujuan agar tidak memberatkan loading.

Buttonnya, jika di klik akan meloncat tanpa batas ke paling atas halaman.
<button id='top'>Top&amp;uarr;</button>

Atau bisa juga:
<div id='top'>Top</div>

Untuk hasil tampilannya sangat sederhana karena hanya kode dasar alias masih default, perlu ditambahi ini dan itu, misalnya gambar atau style css agar tampil menarik, silakan kreasikan sendiri.

Berikut ini dua versi lainnya yaitu Jquery dan Vanilla, direkomendasikan pakai vanilla karena lebih moderen.

Pemasangannya:
Taruh CSS ke bagian css dan Javascriptnya ke bagian paling bawah dalam Template di atas </body> atau taruh saja keduanya baik CSS maupun JS dibagian atas </body>

Dan tombolnya sebetulnya bisa di pasang dimana saja bebas tapi sayangnya saya pasang dibagian atas </body> tidak muncul. Kalau Template saya mah enak banyak tempat menaruh kode. Namun ide terbaik mungkin pasang saja di dekat "Powered".

Dan ini tombol versi jquery:
<div class='backToTop'>Top</div>

Versi JQuery:
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<style>
.backToTop{
cursor: pointer;
border-radius: 50%;
border: 1px solid silver;
box-shadow: 0 0 10px silver;
background: white;
color: black;
padding: 8px 10px;
font-size: 18px;
position: fixed;
bottom: 20px;
right: 20px
}
</style>
<script>/*<![CDATA[*/ var $backToTop = $(".backToTop"); $backToTop.hide(); $(window).on('scroll', function() { if ($(this).scrollTop() > 200) { $backToTop.fadeIn(); } else { $backToTop.fadeOut(); } } ); $backToTop.on('click', function(e) { $("html, body").animate({scrollTop: 0}, 50); }); /*]]>*/</script>


Versi Vanilla (Rekomendasi):
<style>.back-to-top { transition: all .25s ease-in-out; position: fixed; bottom: 0; right: 0; display: inline-flex; cursor: pointer; align-items: center; justify-content: center; margin: 0 1em 1em 0; border: 1px solid silver; box-shadow: 0 0 10px silver; border-radius: 50%; padding: .25em; width: 30px; height: 30px; background-color: white; } .show { visibility: visible; opacity: 1; } .hide { visibility: hidden; opacity: 0; } .back-to-top svg { fill: black; width: 20px; height: 20px; } 
</style>
<script>/*<![CDATA[*/ const scrollToTopButton = document.getElementById('jump-to-top'); const scrollFunc = () => { y = window.scrollY; if (y > 200) { scrollToTopButton.className = 'back-to-top show'; } else { scrollToTopButton.className = 'back-to-top hide'; } }; window.addEventListener('scroll', scrollFunc); const scrollToTop = () => { const c = document.documentElement.scrollTop || document.body.scrollTop; if (c > 0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, c - c / 10); } }; scrollToTopButton.onclick = function(e) { e.preventDefault(); scrollToTop(); } /*]]>*/</script>


Keterangan buat vanilla:

if (y > 200) artinya saat halaman di scroll kebawah sekitar 200px baru akan muncul tombolnya. Set ke 0 jika ingin langsung muncul. Namun perkiraan tinggi posting bisa mencapai 800px lebih, jadi silakan set sesuai selera.

window.scrollTo(0, c - c / 10); angka 10 ini setelan untuk smooth, kehalusan scroll, bisa di set ke 100 misalnya, semakin tinggi angkanya semakin pelan scrolling/pergulirannya, ketika tombol TOP di tap halaman akan bergerak perlahan keatas sampai paling atas.

Dan ini tombol versi vanila:
<a class='back-to-top hide' href='' id='jump-to-top'><svg viewbox='0 0 12 6' xmlns='https://www.w3.org/2000/svg'><path d='M12 6H0l6-6z'/></svg></a>

Pada intinya semua kode diatas sensitif jika langsung dimasukkan kedalam Template, untuk lebih mudahnya ada baiknya pasang "Wadget HTML/JavaScript" dan masukin semua kode diatas kedalam Widget tersebut tanpa harus repot menaruh diatas </body>

Untuk contoh hasilnya hanya bisa dilihat di posting ini saja, soalnya hanya terpasang di halaman ini.

Komentar


  1. Yang sering saya dapati back to top dipasang mengikuti scrolling. Itu kodenya sama atau beda?

    BalasHapus
    Balasan
    1. Coba dicari kodenya, cakep tuh kalau ada yang mengikuti scrolling. Apalagi kalau masangnya ngga ribet mau dah saya pasang di blog saya

      Hapus
    2. Iya mas, nanti saya tambahkan dalam post diatas kalau ada 👍

      Hapus

Posting Komentar

Popular Posts

Halaman Alternatif dengan Tag Kanonis yang tepat

Halaman alternatif dengan tag kanonis yang tepat dengan Status: Dikecualikan. Kurang lebih begitulah kalimatnya dari cakupan data blog kita jika dilihat di Search Console. Salah satu penyebabnya adalah komentar di blog. Dari misalnya url postingannya begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html Berubah menjadi begini: https://jaeyzone.blogspot.com/2019/04/10-hal-seputar-mimpi-basah-yang-mungkin.html?showComment=1554698065783 Semakin banyak komentar dipostingan maka semakin banyak pula url semacam itu dengan ID berupa angka yang berbeda2 yang memicu semakin banyak "Halaman alternatif dengan tag kanonis yang tepat, Status: Dikecualikan" di Search Console. Pada dasarnya url beranak pinak dan berubah2 semacam itu kurang baik buat Seo blog jika tidak dicegah dengan "tag kanonis". Tapi tenang itu tidak membahayakan blog di mesin pencari karena hal ini sudah ditangani oleh Blogger yang artinya disetiap duplikat komentar semacam

Apa Saja Fitur Baru Samsung A10 Setelah Update Perangkat Lunak?

Samsung seri A10 terdapat dua jenis yaitu A10 dan A10s. Perbedaannya lumayan jauh baik dari segi perangkas keras maupun lunak, pada intinya A10s jauh lebih bagus dan perbedaan harga keduanya saat itu terpaut sekitar Rp. 150 ribuan. Berhubung disini saya pakai A10 (bukan A10s) jadi postingan ini khusus untuk A10 saja. Sebetulnya semua fitur terbarunya sudah tertulis saat akan update dan bisa dibaca kembali setelah update, diantaranya: 1. Pembaruan One UI 3.1 (Android 11) dari sebelumnya One UI 2.1 (Android 10) 2. Desain visual 3. Peningkatan performa 4. Kustomisasi lebih nyaman 5. Peningkatan fitur-fitur 6. Panggilan dan obrolan 7. Gambar dan Video 8. Pengaturan 9. Keyboard Samsung 10. Dan banyak lagi. Dengan total ukuran unduh-an 1.227.41 MB atau sekitar 1.2 GB-an Sebagai awam tak banyak yang dapat saya tuliskan disini, hanya beberapa perbedaan yang paling menonjol saja dari pembaruan/peningkatan ini. Android 11, sewaktu masih Android 10 ada beberapa aplikasi yang tidak bisa di unduh d

Cara kembalikan Pengaturan "Aksi lengkap memakai" ke Default di Android

Terkadang saat akan membuka suatu file misal ketika membuka video atau lainnya akan muncul tulisan "Aksi lengkap memakai" dan kita diminta memilih "Selalu" atau "Sekali saja". Kalau memilih Selalu, info tulisan tersebut tidak akan muncul lagi dan video akan selalu diputar dengan aplikasi pemutar video yang telah kita pilih. Namun, mungkin kita memiliki aplikasi pemutar video lebih dari satu dan ingin menggunakan pemutar video yang lainnya tapi karena telah memilih "Selalu" maka tidak bisa lagi. Untuk itu maka kita harus menghapus "Hapus Default" atau mengembalikan pengaturan tersebut seperti semula agar saat ingin memutar video akan muncul "Aksi lengkap memakai" dan kita bisa memilih ingin memutar video dengan pemutar video yang mana dari beberapa pemutar video yang ada. Haha.. Jujur saja saya pernah kesal lho gara2 itu. Sebetulnya petunjuknya sudah ada saat akan memilih "Selalu" tapi karena terburu2 biasanya tidak s