Ads

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

12 komentar

Blogger Disqus
  1. tambahin link jquery nya min kalo main hajar aja ga work soale tu method pake ajax

    BalasHapus
    Balasan
    1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

      Hapus
  2. help me add time ago to js!
    JS:
    https://anotepad.com/notes/qbb2nrxa
    ----------
    I tried everything but it didn't work

    BalasHapus
    Balasan
    1. change this.
      https://blogger.googleusercontent.com/img/a/AVvXsEh-x-WisyIdAECUQVB8PVHR4AqMq6LpxxYSPM9wGpkIJRPNJ_efDc-n06AkNlDWvkPAQQ_hJlvHpEcBnCfIHE-GuUNFUXrPTQ33i9mwk7-bVnMCp2NCR_6h9iHLf57mUKwNWO-Zs_lOoFodylo39MloMdITrItJVRFLPTGq-hYPgY2SJGCtJUDB5Vbl
      with
      timeAgo(n.published.$t)

      Hapus
    2. add this below //<![CDATA[
      var showdates = true;

      Hapus
    3. This is where I want to change to "timeago"!
      https://lh3.googleusercontent.com/-uJQLuBJY85U/YW2IbON9N3I/AAAAAAAAIjA/yFD7WbaoR08bo40nr1n6lorrRWwglm76gCLcBGAsYHQ/w600/dasdasf.PNG

      Hapus
    4. see if you can edit javascript so it can work

      Hapus
    5. I'm not very good at English, hope you understand and help me!

      Hapus
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Jika ingin menulis kode maka harus di-parse terlebih dulu (terutama Javascript dan HTML)
  • Gunakan <i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>
×

Berlangganan

Dapatkan pemberitahuan melalui email setiap ada artikel baru. Gratis!