Langganan...?

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).

jQuery Timeago Blogger Blogspot

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.

Blogger Admin

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.

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/[email protected]/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/[email protected]/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.

Demo Jquery TImeago Blogger Blogspot

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 .
  • 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 dan terakhir diperbarui . Iya, itu pakai Timeago juga, sob. Semoga bermanfaat 😊

25 komentar:

  1. Aku baru tau kang, ini pakai yang terbaru 1.5 ya kang?
    Keren aku belum menyelidiki tuh Jquery,,
    thank's a lot

    BalasHapus
  2. Aku mau coba pakai template eksperiment kang, wah utak-atik lagi nih..
    Mau minta saran, enaknya di mana kang ya,,kalu buat simpan file, google code kira2 bagus ga kang? soalnya aku suka simpan di ripway dan itu dah penuh..

    BalasHapus
  3. pertama main kesini, semoga disambut ramah...
    oya sob hanya mau nawarin hubungan erat persahabatan nech,, bisa tuker follow dan tuker link gak???
    Some Useful Tips
    saya tunggu konfirmasi di komentar blog saya

    BalasHapus
  4. bagusan mana format waktu relativ atau absolut ?

    ikut mampir yah
    salam
    myPCgadget

    BalasHapus
  5. Hendro Prayitno, blogger admin
    Bener Kang, jQuery 1.5, tapi yang lama juga bisa lho.

    Hosting yang bisa menyimpan javascript dengan gratisan dan bagus pakai Dropbox saja Kang, maknyus (free space 2GB).

    BalasHapus
  6. Some Useful Tips
    Dengan senang hati, silakan saja sob

    mypcgadget
    sifatnya opsional sob, jadi tergantung selera saja

    BalasHapus
  7. kalo menurut saya mendingan kalo kode bawaan blogspot jgn diutak-atik, walo itu sipatnya individu sih...
    cuman kalo ada perbaikan dan perubahan dari blogspotnya sendiri bakalan kebelinger juga nanti ke kitanya..LoL

    BalasHapus
  8. Trik ini cuma menambah class timeago aja sob, ga mengubah total bawaan blogger, jadi aman-aman saja. Kalau mengubah all head content itu baru keblinger sob, efeknya banyak banget, salah satunya avatar default blogger ga bisa muncul :D

    BalasHapus
  9. tutorialnya sangat bermanfaat....

    terima kasih

    BalasHapus
  10. mantab sekali tipsnya sobat, sangat bagus dan inspiratif... :D
    salam sukses

    BalasHapus
  11. makasih sharenya kawan, sangat membantu bagi saya yang masih newbie dalam soal kode pemrograman...

    BalasHapus
  12. sangat mantabs dan sangat berguna bagi saya,,,
    terima kasih... ilmunya..

    BalasHapus
  13. after I translate with Google, this article is very nice and help me to study again...

    thanks for you

    BalasHapus
  14. nice share and make me getting some knowlegde

    BalasHapus
  15. mirip kaya di tumblr....

    BalasHapus
  16. Wachid Rahman Al-Habsyi
    Sama-sama sob..

    blogger pemula, artikel media massa indonesia, gudang mp3, media game, pc tablet news
    Terima kasih kunjungan dan komentarnya (btw, ini yang punya satu orang ya? hehe..)

    mohanlink™
    Selamat mencoba bro..

    Gori
    Bener sekali sob, inspirasinya memang dari Tumblr hehe..

    BalasHapus
  17. aku jadi tahu istilah setting waktu seperti ini, disqus menamakannya format waktu absolute

    BalasHapus
  18. hahaha...kita memang sohtanaka addict teman, sip lahh.
    izin follow yuaaa..

    BalasHapus
  19. rio
    Iya sob, saya juga

    Aria
    Memang keren dah Bang Soh hehe...

    محمد نور الإمام ألجوهرئ
    ga bisa bagaimana sob? demonya juga asik-asik aja tuh...

    BalasHapus
  20. bagaimana cara merubah format tanggal posting dari format tanggal Indonesia menjadi format tanggal jepang,,,??? mhon tutorialnya,,,

    BalasHapus
  21. The post is so informative on the worthwhile topic awesome collection, hope you will keep posting good material.

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

M2D Network

Rekomendasi

Kembali Lagi dan Lagi

Tawaran

Shopee Affiliate