Cara Mengubah Tanggal Posting Dengan Time Ago Pada Template Default Blogger Versi 3

Pada artikel yang lalu, kita telah belajar tentang cara pemasangan breadcrumb pada template default blogger terbaru versi ke 3 yang bisa diterapkan pada semua varian template default tersebut. Nah, pada postingan kali ini kita akan coba utak-atik template kembali agar tampilan blog tampak lebih unik dengan mengganti format tanggal postingan menjadi waktu lalu atau time ago. Cara ini juga nantinya bisa diterapkan pada semua varian template default tersebut. 

contoh timeago pada template emporio

Tampilan time ago pada suatu situs biasanya dibuat sebagai petunjuk waktu dibuatnya postingan berdasarkan waktu terkini ketika dilihat oleh pengunjung. Fitur ini akan terus berubah seiring waktu misalkan bisa saja tertulis 30 detik lalu, 10 menit lalu, 5 jam lalu, 2 hari lalu, 5 bulan lalu, atau 4 tahun lalu. Format penulisan waktu seperti ini biasanya sering kita jumpai pada beberapa situs sosmed atau situs-situs web besar seperti pada tribunnews.com dan lainnya. 

Secara default, semua varian template blogger terbaru versi ke 3 umumnya menyertakan tanggal posting yang terletak di bawah judul postingan, baik itu di halaman homepage maupun halaman artikel. Nah, kali ini kita akan coba mengubah format tanggal tersebut dengan fitur time ago ini agar tampilan blog semakin unik karena memakai format penulisan waktu lain dari pada yang lain. Bagaimana?, anda tertarik untuk memasangnya di blog anda?. Silahkan simak dan ikuti langkah mudah di bawah ini untuk cara penerapannya. 

Mengubah Tanggal Posting Menjadi Time Ago Pada Template Default Blogger Versi 3

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Pastikan di template blog anda sudah terpasang kode jquery. Jika belum ada, silahkan gunakan kode berikut ini dan letakkan di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

4. Selanjutnya gulir ke bawah cari kode </body> dan letakkan kode berikut ini di atasnya. 

<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+" detik lalu":r<60?r+" menit lalu":a<24?a+" jam lalu":g<30?g+" hari lalu":h<12?h+" bulan lalu":n+" tahun lalu"}

//End function

$("time.published").each(function(){

  $(this).html(timeAgo(new Date($(this).attr("datetime"))));

});

//]]>

</script>

Keterangan: format waktu bisa anda ubah (misal ingin pakai bahasa Inggris) menjadi seconds ago, minutes ago, hours ago, days ago, months ago, dan years ago. 

5. Simpan kembali template anda. 

Silahkan anda bisa cek dan lihat hasilnya. Pada template default blogger, fitur ini akan otomatis muncul pada tampilan homepage maupun halaman posting. Jika anda menginginkan untuk muncul hanya di salah satunya, anda bisa tambahkan tag kondisional untuk mengaturnya. 

Misal hanya muncul di tampilan homepage, gunakan tag kondisional berikut ini:

<b:if cond='data:view.isHomepage'> .... </b:if>

Atau ingin hanya muncul pada halaman postingan, silahkan pakai tag kondisional berikut ini:

<b:if cond='data:view.isPost'> .... </b:if>

Selain pada template default blogger versi ke 3, cara ini juga sebenarnya bisa diterapkan pada template-template blogspot lainnya. Hanya saja, format html penulisan waktu (timestamp) pada beberapa template umumnya berbeda sehingga perlu anda sesuaikan lagi kode di atas. Sumber

Lokasi:

Berbagi :