Kang Rian
| Gambar Utama |
dan jika teman-teman hover / sentuh tautan time ago tersebut, maka akan muncul tooltip detail dari timestamp-nya seperti pada screenshot berikut :
nah, sekarang kita akan coba aplikasikan fungsi tersebut melalui platform "Blogger / Blogspot" menggunakan kode jQuery ( JavaScript Query ) yang sudah saya sediakan dibawah ini, untuk membuat Blog teman-teman lebih Human Friendly ( Mudah difahami oleh Manusia ) ketika di akses.
Cara Mengubah Timestamp menjadi Time Ago pada Platform Blogger / Blogspot
Oke, langsung saja berikut cara penerapan format time ago pada timestamp di platform blogger :
- Pertama, Buka Blogger > Edit HTML lalu masukan kode xml yang sudah ditambahkan kode timestamp ISO8601 berikut :
<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date'><data:post.date/></time>
setelah Tag dengan Class post-title atau sebelum Tag dengan Class post-body, seperti pada contoh berikut ini :
Kode XML Blogger <h1 class='post-title'>
<data:post.title/>
</h1>
<time expr:datetime='data:post.date.iso8601' expr:title='data:post.date'><data:post.date/></time>
<div class='post-body'>
<data:post.body/>
</div> - Selanjutnya, simpan Kode jQuery berikut ini sebelum tag penutup </body> seperti pada contoh berikut ini :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script> <!-- Hapus jQuery Library di atas jika sudah pernah di-install --> <script> $(function(){ $('[datetime]:not(.timeago)').each(function() { var $this = $(this); var data_timeago = $this.attr('datetime'); $this.addClass('timeago'); if(!$this.attr('title')) { $this.attr('title', data_timeago); } $this.text(get_timeago(data_timeago)); }); }); function get_timeago(t) { var e = new Date(t), a = 36e5, o = 24 * a, s = 30 * o, i = 365 * o, n = "yang lalu", l = new Date - e; return l < 6e4 ? Math.round(l / 1e3) + " detik " + n : l < a ? Math.round(l / 6e4) + " menit " + n : l < o ? Math.round(l / a) + " jam " + n : l < s ? Math.round(l / o) + " hari " + n : l < i ? Math.round(l / s) + " bulan " + n : Math.round(l / i) + " tahun " + n } </script> - Jika sudah, coba reload postingan yang sudah ada dan lihat hasil-nya..
adaka kode yang perlu di tambahkan agar artikel selanjutnya juga bisa menampilkan timeago?
I want to know how much the SimStore™ template costs in dollars ???
Saya ingin tahu berapa harga template SimStore™ dalam dolar ???
Silahkan berikan komentar jika ada pertanyaan / masukan untuk postingan ini.