Ubah 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). Seperti pada blog ini (di footer laman posting) terdapat format waktu seperti ini: 06 Februari 2011 (pada umumnya juga diikuti dengan waktu posting: pada 14.21, tapi pilihan ini sengaja saya sembunyikan). 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.

jQuery Timeago

Sebagaimana yang telah kita ketahui bersama, Disqus adalah sebuah layanan penyedia fasilitas kolom diskusi atau komentar pada web atau blog. Salah satu blog yang mengaplikaskan Disqus pada kotak komentar adalah Blogger Admin, yang dikelola oleh Kang Hendro Prayitno.

Blogger Admin

Selain Disqus, format waktu relative juga diterapkan oleh salah satu jejaring sosial terbesar saat ini, Twitter.

Twitter

Lalu bagaimana dengan blogger? apakah bisa menggunakan format waktu relative? Tentu saja bisa, dengan memanfaatkan jQuery Timeago. Namun untuk sementara trik ini hanya bisa diterapkan pada format waktu yang ada di posting blogger (belum bisa digunakan pada kolom komentar).

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 modofikasi pada format waktu default blogger, dan jadilah format waktu relative untuk blogger dengan jQuery Timeago :)

Lalu bagaimana? mari ikuti saya..

Pastikan Anda telah mencontreng opsi timestamp pada opsi laman entri (Rancangan + Elemen Laman + pada bagian Posting Blog, klik Edit)

blog edit

Tuju laman Edit HTML, Expand Template Widget.

Untuk format waktu relative dalam bahasa Inggris, letakkan kode berikut di atas kode </head> .

<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://timeago.yarp.com/jquery.timeago.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery(&quot;abbr.timeago&quot;).timeago();
});
</script>


Untuk format waktu relative dalam bahasa Indonesia, ganti kode di atas dengan kode berikut.

<!-- jQuery -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>
<script src='http://timeago.yarp.com/jquery.timeago.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery(&quot;abbr.timeago&quot;).timeago();
});
jQuery.timeago.settings.strings = {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: &quot;yang lalu&quot;,
suffixFromNow: &quot;dari sekarang&quot;,
seconds: &quot;kurang dari semenit&quot;,
minute: &quot;sekitar satu menit&quot;,
minutes: &quot;%d menit&quot;,
hour: &quot;sekitar sejam&quot;,
hours: &quot;sekitar %d jam&quot;,
day: &quot;sehari&quot;,
days: &quot;%d hari&quot;,
month: &quot;sekitar sebulan&quot;,
months: &quot;%d bulan&quot;,
year: &quot;sekitar setahun&quot;,
years: &quot;%d tahun&quot;
};
</script>


Penting! ubah kode yang berwarna oranye dengan kode yang telah Anda hosting sendiri, Anda dapat menyimpan kode tersebut di Dropbox.

Selanjutnya mari kita temukan kode <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Tambahkan kode timeago pada class published seperti ini.

<abbr class='published timeago' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Simpan template Anda. Hasilnya seperti gambar berikut. Semoga bermanfaat :)

File Library Timeago live Demo




25 komentar:

  1. Aku baru tau kang, ini pakai yang terbaru 1.5 ya kang?
    Keren aku belum menyelidiki tuh Jquery,,
    thank's a lot

    BalasHapus
  2. Aku mau coba pakai template eksperiment kang, wah utak-atik lagi nih..
    Mau minta saran, enaknya di mana kang ya,,kalu buat simpan file, google code kira2 bagus ga kang? soalnya aku suka simpan di ripway dan itu dah penuh..

    BalasHapus
  3. pertama main kesini, semoga disambut ramah...
    oya sob hanya mau nawarin hubungan erat persahabatan nech,, bisa tuker follow dan tuker link gak???
    Some Useful Tips
    saya tunggu konfirmasi di komentar blog saya

    BalasHapus
  4. bagusan mana format waktu relativ atau absolut ?

    ikut mampir yah
    salam
    myPCgadget

    BalasHapus
  5. Hendro Prayitno, blogger admin
    Bener Kang, jQuery 1.5, tapi yang lama juga bisa lho.

    Hosting yang bisa menyimpan javascript dengan gratisan dan bagus pakai Dropbox saja Kang, maknyus (free space 2GB).

    BalasHapus
  6. Some Useful Tips
    Dengan senang hati, silakan saja sob

    mypcgadget
    sifatnya opsional sob, jadi tergantung selera saja

    BalasHapus
  7. kalo menurut saya mendingan kalo kode bawaan blogspot jgn diutak-atik, walo itu sipatnya individu sih...
    cuman kalo ada perbaikan dan perubahan dari blogspotnya sendiri bakalan kebelinger juga nanti ke kitanya..LoL

    BalasHapus
  8. Trik ini cuma menambah class timeago aja sob, ga mengubah total bawaan blogger, jadi aman-aman saja. Kalau mengubah all head content itu baru keblinger sob, efeknya banyak banget, salah satunya avatar default blogger ga bisa muncul :D

    BalasHapus
  9. tutorialnya sangat bermanfaat....

    terima kasih

    BalasHapus
  10. mantab sekali tipsnya sobat, sangat bagus dan inspiratif... :D
    salam sukses

    BalasHapus
  11. makasih sharenya kawan, sangat membantu bagi saya yang masih newbie dalam soal kode pemrograman...

    BalasHapus
  12. sangat mantabs dan sangat berguna bagi saya,,,
    terima kasih... ilmunya..

    BalasHapus
  13. after I translate with Google, this article is very nice and help me to study again...

    thanks for you

    BalasHapus
  14. nice share and make me getting some knowlegde

    BalasHapus
  15. mirip kaya di tumblr....

    BalasHapus
  16. Wachid Rahman Al-Habsyi
    Sama-sama sob..

    blogger pemula, artikel media massa indonesia, gudang mp3, media game, pc tablet news
    Terima kasih kunjungan dan komentarnya (btw, ini yang punya satu orang ya? hehe..)

    mohanlink™
    Selamat mencoba bro..

    Gori
    Bener sekali sob, inspirasinya memang dari Tumblr hehe..

    BalasHapus
  17. aku jadi tahu istilah setting waktu seperti ini, disqus menamakannya format waktu absolute

    BalasHapus
  18. hahaha...kita memang sohtanaka addict teman, sip lahh.
    izin follow yuaaa..

    BalasHapus
  19. rio
    Iya sob, saya juga

    Aria
    Memang keren dah Bang Soh hehe...

    محمد نور الإمام ألجوهرئ
    ga bisa bagaimana sob? demonya juga asik-asik aja tuh...

    BalasHapus
  20. bagaimana cara merubah format tanggal posting dari format tanggal Indonesia menjadi format tanggal jepang,,,??? mhon tutorialnya,,,

    BalasHapus
  21. The post is so informative on the worthwhile topic awesome collection, hope you will keep posting good material.

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *

[ Instagram M2D ]

[ Favorit ]

Malam Marah Malam Ramah

Apalah yang istimewa dengan malam? malam tak lebih dari kegelapan yang menyelimuti sesuatu yang tak pantas menikmati kelembutan cahaya, kera...

[ Referral ]

Ardhiansyam | Kontak | Sitemap | ke atas ↑