|
| Cara Mudah Mengubah 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).
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. Biasanya blog yang mengaplikaskan Disqus pada kotak komentar adalah Blogger dengan versi AMP.
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 Pasang jQuery Timeago
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 caranya? mari kita simak penjelasan tatacaranya berikut ini...
- Pastikan Anda telah mengaktifkan opsi
Show publish timepada 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.
- Untuk format waktu relative dalam bahasa Inggris, letakkan kode berikut di atas kode
- Selanjutnya tambahkan class
timeagopada tiap tagabbrseperti 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
timeagopada tiap tagtimeseperti ini.<time class='published timeago' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time>
- Simpan template Anda dan lihat hasilnya seperti gambar berikut.
Menampilkan Jangka Waktu yang Lalu
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 😊.
Sumber: https://timeago.yarp.com/
Anda mungkin tertarik artikel ini :
Terima kasih telah membaca artikel kami yang berjudul: Mengubah Format Waktu Publikasi Postingan Blogger dengan Timeago Plugin jQuery, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat. Simak artikel kami lainnya di Google News.