Cara Mudah Pasang Timeago di Blogger

Table of Contents

Pernah nggak sih, kalian lihat blog yang tanggal postingannya tertulis "2 jam yang lalu, 2 hari yang lalu, sebulan yang lalu, atau "1000 tahun yang lalu"? Keren kan?

Nah, itu namanya fitur TimeAgo! Fitur ini bikin tampilan blog kamu jadi lebih informatif karena pembaca langsung tahu kapan artikel itu dipublikasikan tanpa perlu menghitung-hitung lagi.

Kenapa sih Timeago itu Penting?

• Lebih Kekinian: Tampilan blog kamu jadi lebih modern.
• User-Friendly: Pembaca lebih mudah memahami usia postingan.
• SEO Friendly: Google lebih suka blog yang terstruktur dan mudah dipahami.

Tenang, Pasang Timeago di Blogger Itu Gampang Banget!

Nggak perlu jago coding! Kamu cuma perlu ikuti langkah-langkah sederhana ini: 

1. Login ke Akun Blogger Kamu: Pastikan kamu sudah masuk ke akun Blogger yang ingin kamu edit. 

2. Buka Template Blog: Di dashboard Blogger, klik "Tema" atau "Template." 

3. Edit HTML Blog: Klik tombol "Edit HTML.

4. Tambahkan Kode Javascript Diatas Penutup Tag </body>

<script>//<![CDATA[
/**
 * Take an RFC 3339 or ISO 8601 date and returns
 * the date in human readable form.
 *
 * Will return undefined if lacks browser support
 * or it cannot parse the date.
 *
 * @param  {string} time
 * @param  {object} [lang] Optional language object
 * @return {string|undefined}
 * @license MIT
 * @author Sam Clarke <sam@samclarke.com>
 */
function timeToWords(time, lang) {
  lang = lang || {
    postfixes: {
      "<": " ago",
      ">": " from now",
    },
    1000: {
      singular: "a few moments",
      plural: "a few moments",
    },
    60000: {
      singular: "about a minute",
      plural: "# minutes",
    },
    3600000: {
      singular: "about an hour",
      plural: "# hours",
    },
    86400000: {
      singular: "a day",
      plural: "# days",
    },
    2592000000: {
      singular: "a month",
      plural: "# months",
    },
    31540000000: {
      singular: "a year",
      plural: "# years",
    },
  };

  var timespans = [1000, 60000, 3600000, 86400000, 2592000000, 31540000000];
  var parsedTime = Date.parse(time.replace(/\-00:?00$/, ""));

  if (parsedTime && Date.now) {
    var timeAgo = parsedTime - Date.now();
    var diff = Math.abs(timeAgo);
    var postfix = lang.postfixes[timeAgo < 0 ? "<" : ">"];
    var timespan = timespans[0];

    for (var i = 1; i < timespans.length; i++) {
      if (diff > timespans[i]) {
        timespan = timespans[i];
      }
    }

    var n = Math.round(diff / timespan);

    return (
      lang[timespan][n > 1 ? "plural" : "singular"].replace("#", n) + postfix
    );
  }
}
document.addEventListener("DOMContentLoaded", function () {
  var elements = document.getElementsByTagName("time");
  for (var i = 0; i < elements.length; i++) {
    var elm = elements[i];
    // The date should be either in the datetime attribute
    // or in the text contents if no datetime attribute
    var date = elm.getAttribute("datetime") || elm.textContent;

    var dateInWords = timeToWords(date);
    if (dateInWords) {
      elm.textContent = dateInWords;
    }

    // you could use setInterval to automatically update
    // the timestamps every so often if wanted
  }
});
//]]></script>

5. Simpan Template: Klik tombol "Simpan Tema" atau "Save Template" yang ada di bagian atas.

Voila! Blog Kamu Sekarang Sudah Punya Fitur Timeago!

Coba buka blog kamu dan lihat perubahannya. Tanggal postingan sekarang sudah berubah menjadi "2 jam yang lalu" atau "kemarin" dan tentunya ringan tanpa tambahan jQuery dan perubahan apapun pada kode.

Tips Tambahan:

Kustomisasi: Kamu bisa mengubah teks "tahun yang lalu," "bulan yang lalu," dll. sesuai dengan bahasa dan gaya kamu sendiri.

Responsif: Pastikan tampilan TimeAgo kamu responsif di semua perangkat (desktop, tablet, dan mobile).

Test: Uji coba di beberapa browser untuk memastikan semuanya berfungsi dengan baik.

Gimana? Mudah kan? Jangan ragu untuk mencoba dan bikin blog kamu makin keren, selamat mencoba.

Script Timeago versi minify

// timeago
function timeToWords($,a){a=a||{postfixes:{"<":" ago",">":" from now"},1e3:{singular:"a few moments",plural:"a few moments"},6e4:{singular:"about a minute",plural:"# minutes"},36e5:{singular:"about an hour",plural:"# hours"},864e5:{singular:"a day",plural:"# days"},2592e6:{singular:"a month",plural:"# months"},3154e7:{singular:"a year",plural:"# years"}};var e=[1e3,6e4,36e5,864e5,2592e6,3154e7],t=Date.parse($.replace(/\-00:?00$/,""));if(t&&Date.now){for(var r=t-Date.now(),n=Math.abs(r),o=a.postfixes[r<0?"<":">"],l=e[0],u=1;u<e.length;u++)n>e[u]&&(l=e[u]);var s=Math.round(n/l);return a[l][s>1?"plural":"singular"].replace("#",s)+o}}document.addEventListener("DOMContentLoaded",function(){for(var $=document.getElementsByTagName("time"),a=0;a<$.length;a++){var e=$[a],t=timeToWords(e.getAttribute("datetime")||e.textContent);t&&(e.textContent=t)}});

Keyword: TimeAgo, Blogger, Cara Pasang TimeAgo di Blogger, Fitur Blog, Tips Blogger, SEO Blog, Tampilan Blog, Blog Kekinian, Panduan Blogger

Referensi: timeago (JavaScript - jQuery) untuk versi blogspot

Sumber script: JavaScript <time> to time ago / future

Edit: Sedikit tambahan

• time: Menggunakan elemen <time> adalah semantik yang benar untuk menampilkan waktu.
• class='comment-timestamp': Class ini akan digunakan oleh JavaScript Anda untuk memilih elemen timestamp.
• expr:datetime='data:comment.timestampISO8601': Atribut datetime ini menyimpan timestamp dalam format ISO 8601, yang ideal untuk diproses oleh fungsi timeToWords.

Semoga artikel ini bermanfaat ya, jangan lupa bagikan ke teman-teman blogger lainnya.