Mengubah Tanggal Posting Blog Menjadi Waktu Lalu (Time Ago)

Tutor kali ini adalah Mengubah Tanggal Postingan Menjadi Waktu Lalu atau Time Ago. Yang mana tampilan nya seperti saat membuat postingan di SosMed.

Mengubah Tanggal Posting Blog Menjadi Waktu Lalu (Time Ago)
Dagruel

Langsung saja berikut cara nya. Pertama Pasang Script berikut di atas Tag </body>

<script>
//<![CDATA[
//Start function
function timeAgo(o){var t=(new Date).getTime()-o.getTime(),e=Math.floor(t/1e3),r=Math.floor(e/60),a=Math.floor(r/60),g=Math.floor(a/24),h=Math.floor(g/30),n=Math.floor(h/12);return 0===t?"Just now":e<60?e+" seconds Ago":r<60?r+" minutes Ago":a<24?a+" hours Ago":g<30?g+" days Ago":h<12?h+" months Ago":n+" years Ago"}
//End function

//]]>
</script>
Text Yang Ditandai Dapat Kalian Ubah

Selanjutnya kalian perlu mencari tag tanggal publish postingan tersebut karena setiap template mungkin berbeda beda.

Saya Ambil Contoh dari Template buatan saya SeleSeven tag nya seperti ini.

<time class="published" datetime="2021-02-09T01:32:00-08:00" title="2021-02-09T01:32:00-08:00">
  Februari 09, 2021
</time>

Jika template kalian Tag nya sama dengan yang di atas maka script nya begini. (script di letakkan di bawah tulisan //End function pada script sebelumnya)

//Jika yang di ubah hanya satu gunakan ini
$("time.published").html(timeAgo(new Date($("time.published").attr("datetime"))));

//Jika yang di ubah ada banyak gunakan ini
$("time.published").each(function(){
  $(this).html(timeAgo(new Date($(this).attr("datetime"))));
});

Atau Tampilan nya seperti di berikut.

<div class="timestamp">
  Februari 09, 2021
</div>

Maka Script Nya Seperti ini.

//Jika yang di ubah hanya satu gunakan ini
$(".timestamp").html(timeAgo(new Date($(".timestamp").text())));

//Jika yang di ubah ada banyak gunakan ini
$(".timestamp").each(function(){
  $(this).html(timeAgo(new Date($(this).text())));
});

Untuk Demo Nya bisa kalian buka pada link berikut. Salam Dari Saya sampai jumpa kembali.

https://www.w3schools.com/code/tryit.asp?filename=GOP91P0SO04N

Comments