7/20/2017

Cara Membuat Informasi Tentang Pembaruan Artikel Dengan JavaScript

Ibu Sartika
Alhamdulillah dalam kesempatan kali ini kita bisa ketemu lagi, semoga makin ganteng, cantik, soleh dan soleha ya. Artikel ini akan menjelaskan mengenai cara membuat "keterangan palsu" berisi informasi kapan terakhir kali artikel diperbaharuhi.

Meskipun terkesan sepele, namun keterangan seperti ini ternyata bisa mendongkrak trustworthy dari user atau pengunjung yang berkunjung ke website ataupun aplikasi Android yang kita kelola/kembangkan. Udah pada tau sendiri kan pastinya bahwa pengunjung akan lebih tertarik untuk menyimak informasi yang fresh, tapi yang lebih penting...kontennya harus bermanfaat.
Cara Membuat Informasi Tentang Pembaruan Artikel
Informasi tentang artikel terbaru ini memiliki tampilan kurang lebih seperti ini (sekilas mirip dengan yang ada di websitenya Mas Sugeng. Tapi jujur, informasi ini kami bagikan bukan karena terinspirasi oleh sesuatu yang ada di website orang lain, tapi benar-benar didasari niat ingin berbagi pengalaman dan pengetahuan aja. Biar ubannya nular :D.
Cara Membuat Informasi Tentang Pembaruan Artikel
Seperti biasa, sebelum mengaplikasikan tips ini kami menyarankan anda untuk memastikan blognya sudah memiliki library JQuery, karena jika library tersebut tidak tersedia, maka tips ini tidak akan berjalan sama sekali.

So, berikut ini adalah cara membuat informasi tentang pembaruan artikel :

1. Sisipkan skrip berikut ini  di atas </body>

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni",
    "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
var dayNames= ["Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu"]

var newDate = new Date();
newDate.setDate(newDate.getDate() - 1);
$('.titimangsa').html(dayNames[newDate.getDay()] + " tanggal " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
</script>
</b:if>

Note : Silahkan perhatikan dengan baik serpihan snippet yang kami tandai dengan warna pink gelap, disana ada angka 1. Silahkan ganti angka tersebut dengan angka yang lain. Angka tersebut untuk mengubah informasi mengenai "kapan artikel terakhir diperbaharui". Misalkan anda membuat artikel pada tanggal 20 Juli 2017, maka informasi yang akan ditampilkan akan berkurang 1 hari dari tanggal sekarang.

Untuk demo, silahkan aplikasikan kodenya dan lihat sendiri perubahan yang kami maksud di atas. Maaf gak bisa ngasi demo langsung ke website, bahaya bisa-bisa kapangih modal atuh, sieun ditiron kontenna. :D

2. Sisipkan serpihan code snippet berikut ini  di atas <data:post.body> yang terbungkus oleh conditional tag untuk item/postingan

<div class='infowaktu' style='margin:1.5em 0'>
<data:post.title/> ini terakhir diperbaharui pada hari <span class='titimangsa'></span>
</div>

3. Sisipkan style berikut ini di atas /head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.infowaktu{background-color:#ffff99;font-size:90%;margin:1em 0 2em 0;text-align:center;padding:1em;border-radius:5px;border:1px solid #ffcc32;color:#FF5722;font-weight:bold}
</style>
</b:if>

Mudah bukan ? Semoga bermanfaat saja deh untuk semuanya, makasi atas atensi dan kunjungannya. Sampai jumpa di kesempatan yang akan datang dengan informasi bermanfaat lainnya.