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

Mengubah Timestamp menjadi Time Ago dengan jQuery

  2
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

2 Komentar

+ Tambahkan
terbaik! thanks om.
yuhu! sama-sama ngab.
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