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




Ardhiansyam | Find us on Google+ | Kontak | Follower? klik di sini | Sitemap | Versi Mobile | ke atas ↑