Mengubah Timestamp menjadi Time Ago dengan jQuery
Mengubah Timestamp menjadi Time Ago dengan jQuery

Mengubah Timestamp menjadi Time Ago dengan jQuery

- 7
Gambar Utama
Mungkin teman-teman yang sering main socmed sering melihat format timestamp yang diubah menjadi format time ago, seperti pada social media ( facebook ) berikut ini :


dan jika teman-teman hover / sentuh tautan time ago tersebut, maka akan muncul tooltip detail dari timestamp-nya seperti pada screenshot berikut :


nah, sekarang kita akan coba aplikasikan fungsi tersebut melalui platform "Blogger / Blogspot" menggunakan kode jQuery ( JavaScript Query ) yang sudah saya sediakan dibawah ini, untuk membuat Blog teman-teman lebih Human Friendly ( Mudah difahami oleh Manusia ) ketika di akses.

Cara Mengubah Timestamp menjadi Time Ago pada Platform Blogger / Blogspot

Oke, langsung saja berikut cara penerapan format time ago pada timestamp di platform blogger :
  1. Pertama, Buka Blogger > Edit HTML lalu masukan kode xml yang sudah ditambahkan kode timestamp ISO8601 berikut : 
    <time expr:datetime='data:post.date.iso8601' expr:title='data:post.date'><data:post.date/></time>

    setelah Tag dengan Class post-title atau sebelum Tag dengan Class post-body, seperti pada contoh berikut ini :
    Kode XML Blogger
    <h1 class='post-title'>
        <data:post.title/>
    </h1>
    <time expr:datetime='data:post.date.iso8601' expr:title='data:post.date'><data:post.date/></time>
    <div class='post-body'>
        <data:post.body/>
    </div>
  2. Selanjutnya, simpan Kode jQuery berikut ini sebelum tag penutup </body> seperti pada contoh berikut ini :

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
<!-- Hapus jQuery Library di atas jika sudah pernah di-install -->

<script>
    $(function(){
        $('[datetime]:not(.timeago)').each(function() {
            var $this = $(this);
            var data_timeago = $this.attr('datetime');
            $this.addClass('timeago');
            if(!$this.attr('title')) {
                $this.attr('title', data_timeago);
            }
            $this.text(get_timeago(data_timeago));
        });
    });
    function get_timeago(t) {
        var e = new Date(t),
            a = 36e5,
            o = 24 * a,
            s = 30 * o,
            i = 365 * o,
            n = "yang lalu",
            l = new Date - e;
        return l < 6e4 ? Math.round(l / 1e3) + " detik " + n : l < a ? Math.round(l / 6e4) + " menit " + n : l < o ? Math.round(l / a) + " jam " + n : l < s ? Math.round(l / o) + " hari " + n : l < i ? Math.round(l / s) + " bulan " + n : Math.round(l / i) + " tahun " + n
    }
</script>
  3. Jika sudah, coba reload postingan yang sudah ada dan lihat hasil-nya..
Diperbarui

7 Komentar

+ Tambahkan
terbaik! thanks om.
yuhu! sama-sama ngab.
Waktu di komentar dalam bahasa Inggris, bagaimana saya bisa memilikinya dalam bahasa Spanyol?
kalau diterapkan pada time komentar gmn kang, saya cb kok ndk bs ya
saya menggunakan navigasi reload more untuk homepage kang. setelah klik load more, postingan yang tampil selanjutnya tidak menampilkan timeago.

adaka kode yang perlu di tambahkan agar artikel selanjutnya juga bisa menampilkan timeago?
panggil kembali function timeago() setelah event click loadmore kang @abdul ...
kang, saya user template toko WA, mau login ke member area tidak bisa. mohon arahannya.. user: yuga.eko@gmail.com
Tambahkan Komentar

Silahkan berikan komentar jika ada pertanyaan / masukan untuk postingan ini.


Mengubah Timestamp menjadi Time Ago dengan jQuery

Mengubah Timestamp menjadi Time Ago dengan jQuery