Ubah Format Waktu Blogger dengan jQuery Timeago

Pengaturan format waktu atau tanggal pada Blogger atau blogspot sebenarnya sudah diset sedemikian rupa dan otomatis menyesuaikan dengan waktu dan tanggal posting suatu tulisan atau artikel. Beberapa pilihan format pun sudah tersedia dan tinggal pilih saja (dapat diatur lewat Pengaturan + Format).

Seperti pada blog ini (di footer laman posting) terdapat format waktu seperti ini: 06 Februari 2011 (pada umumnya juga diikuti dengan waktu posting: pada 14.21, tapi pilihan ini sengaja saya sembunyikan). Pengaturan waktu tersebut dikenal dengan istilah format waktu absolute (mengacu pada istilah yang dipakai Disqus). Lebih jauh lagi, selain format waktu absolute, Disqus juga menyediakan pilihan format waktu relative. Format waktu realtive ini dapat dilihat pada kolom komentar blog yang menggunakan Disqus.

Sebagaimana yang telah kita ketahui bersama, Disqus adalah sebuah layanan penyedia fasilitas kolom diskusi atau komentar pada web atau blog. Salah satu blog yang mengaplikaskan Disqus pada kotak komentar adalah Blogger Admin, yang dikelola oleh Kang Hendro Prayitno.

Di situ waktu posting komentar tidak menampilkan tanggal atau jam, tetapi waktu relatif yang berpatokan pada saat kita mengakses atau membaca komentar tersebut. Misalnya komentar tersebut diposting pada 4 Februari 2011, lalu saya membacanya pada 16 Februari 2011, maka waktu posting yang akan tampil adalah "2 minggu yang lalu".

Selain Disqus, format waktu relative juga diterapkan oleh salah satu jejaring sosial terbesar saat ini, Twitter.

Lalu bagaimana dengan Blogger? apakah bisa menggunakan format waktu relative? Tentu saja bisa, dengan memanfaatkan jQuery Timeago. Namun trik ini hanya bisa diterapkan pada format waktu yang ada di posting Blogger (tidak bisa digunakan pada kolom komentar bawaan Blogger yang pakai iframe).

Cara memasang jQuery Timeago di Blogger atau blogspot tidak jauh berbeda dengan cara memasang jQuery pada umumnya, cukup dengan memasang beberapa baris kode dan sedikit modifikasi pada format waktu default Blogger, dan jadilah format waktu relative untuk Blogger dengan jQuery Timeago.

Lalu bagaimana? mari ikuti saya..

Pastikan Anda telah mengaktifkan opsi Show publish time pada Layout → Blog Posts → klik Edit (ikon pensil).

Tuju laman Edit HTML

Untuk format waktu relative dalam bahasa Inggris, letakkan kode berikut di atas kode </head> .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
<script src='https://cdn.jsdelivr.net/gh/rmm5t/jquery-timeago@master/jquery.timeago.min.js'/>
<script>
//<![CDATA[
jQuery.timeago.settings.allowFuture = !0;
$(document).ready(function() {
    $("time.timeago").timeago(), $("abbr.timeago").timeago()
});
 //]]>
</script>

Untuk format waktu relative dalam bahasa Indonesia, ganti kode di atas dengan kode berikut.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>
<script src='https://cdn.jsdelivr.net/gh/rmm5t/jquery-timeago@master/jquery.timeago.min.js'/>
<script>
//<![CDATA[
jQuery.timeago.settings.allowFuture = !0;
$(document).ready(function() {
        $("time.timeago").timeago(), $("abbr.timeago").timeago()
    }),
    function(e) {
        "function" == typeof define && define.amd ? define(["jquery"], e) : "object" == typeof module && "object" == typeof module.exports ? e(require("jquery")) : e(jQuery)
    }(function(e) {
        e.timeago.settings.strings = {
            prefixAgo: null,
            prefixFromNow: null,
            suffixAgo: "yang lalu",
            suffixFromNow: "dari sekarang",
            seconds: "kurang dari semenit",
            minute: "sekitar satu menit",
            minutes: "%d menit",
            hour: "sekitar sejam",
            hours: "sekitar %d jam",
            day: "sehari",
            days: "%d hari",
            month: "sekitar sebulan",
            months: "%d bulan",
            year: "sekitar setahun",
            years: "%d tahun"
        }
    });
 //]]>
</script>

Kode yang ditandai (jQuery) tidak perlu ditambahkan bila sudah ada di template Blogger Anda.

Selanjutnya tambahkan class timeago pada tiap tag abbr seperti ini.

<abbr class='published timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Untuk template Blogger versi 3, seperti Contempo, Soho, dll., tambahkan class timeago pada tiap tag time seperti ini.

<time class='published timeago' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time>

Simpan template Anda. Hasilnya seperti gambar berikut.

Live Demo

Selain timestamp postingan blog, Timeago juga bisa digunakan untuk menampilkan jangka waktu yang telah berlalu dan yang akan datang di dalam artikel. Misalnya:

• Indonesia merdeka sejak 17 Agustus 1945 pukul 10:00 WIB.
• 1 Januari 2030 pukul 00:00 WIB kita memasuki tahun 2030.

Contoh penerapannya bisa disimak pada kode-kode berikut.

Indonesia merdeka sejak <time class="timeago" datetime="1945-08-17T10:00:00+07:00">17 Agustus 1945 pukul 10:00 WIB</time>

<time class="timeago" datetime="2030-01-01T00:00:00+07:00">1 Januari 2030 pukul 00:00 WIB</time></b> kita memasuki tahun 2030

Kuncinya ada pada format waktu ISO 8601, yang secara umum berpola (YYYY-MM-DD)T(hh:mm:ss)+(hh:mm).

Pada contoh di atas, +07:00 adalah WIB, silakan disesuaikan dengan zona waktu masing-masing, dan Timeago akan otomatis menyesuaikannya dengan zona waktu pengunjung blog Anda.

Btw, artikel ini pertama diterbitkan 6 Februari 2011 dan terakhir diperbarui 6 Januari 2022. Iya, itu pakai Timeago juga, sob. Semoga bermanfaat 😊