Monday, May 1, 2017

Memasang Random Post Web Notification dengan Javascript

Tags

Kali ini akan berbagi cara Memasang Web Notification dengan Javascript. Seharusnya sudah tidak asing lagi dengan yang nama-nya web notification. Web notification atau notifikasi web berada di sudut kanan bawah layar desktop. 


Seperti yang digunakan oleh Facebook, ketika ada pemberitahuan masuk, maka langsung muncul notifikasi yang berada di kanan bawah layar. Pada umumnya untuk mempromosikan postingan kepada pengunjung yang sedang atau telah mengunjungi website.

Perbedaan web notification dengan notifikasi yang lainnya ialah, apabila website atau browser udah ditutup, notifikasi akan tetap muncul dikanan bawah, terkecuali sudah ditutup dengan menekan tombol silang. Kalau dipikirkan sepertinya mengganggu sekali? Tidak, tidak mengganggu pengunjung.

Cara memasang nya cukup mudah, buka Blogger.com > Layout > Add a Gadget > HTML/Javascript lalu pastekan kode dibawah ini

<script>
$(document).ready(function(){
if (Notification.permission !== "granted")
Notification.requestPermission();
var maxResults = 1;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getJSON(){
$.ajax({
url:'/feeds/posts/summary?alt=json&max-results=0',
timeout:false,
//dataType:'JSON',
success:function(hasil){
var total = hasil.feed.openSearch$totalResults.$t,
startIndex = getRandomInt(1, (total - maxResults));
$.ajax({
url:'/feeds/posts/summary?alt=json&orderby=updated&start-index='+ startIndex +'&max-results='+ maxResults,
timeout:false,
success:function(lihat){
var judul = lihat.feed.entry[0].link[2].title,
link = lihat.feed.entry[0].link[2].href,
thumbnail = lihat.feed.entry[0].media$thumbnail.url,
desc = lihat.feed.entry[0].summary.$t;
 if (!Notification) {
                    alert('Browsermu tidak mendukung Web Notification.'); 
                    return;
                }
                if (Notification.permission !== "granted")
                    Notification.requestPermission();
                else {
                    var notifikasi = new Notification(judul, {
                        icon: thumbnail,  //URL Gambar Notifikasi
                       // body: desc.substr(0, 10),
                    });
                    notifikasi.onclick = function () {
                        window.open(link); //Url ketika notifikasi di klik      
                    };
                    setTimeout(function(){
                        notifikasi.close();
                    }, 5000);
                }
}
});
}
});
}
getJSON();
});
</script>

Setelah itu Save.

Silahkan buka blog kamu untuk melihat hasilnya. Namun apabila ada notifikasi seperti dibawah ini, tekan Allow agar notifikasi dapat muncul.


Mungkin hanya itu saja tentang Memasang Random Post Web Notification dengan Javascript. Apabila ingin mengembangkan kode nya, silahkan dan sangat diharapkan. Apabila ada kekurangan, segera berkomentar agar dapat langsung direvisi oleh saya. Terima kasih.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai