Cara Membuat Widget Random Artikel pada Blog dengan Script

Kali ini saya akan membagikan cara membuat widget random Post atau widget random artikel pada blog dengan menggunakan Script.

Widget random artikel Ini fungsinya untuk menampilkan artikel secara acak. Jika widget popular post menampilkan artikel yang paling terpopuler, maka widget random artikel ini menampilkan artikel yang acak dan akan berganti-ganti setiap kali kita refresh Web Browser yang digunakan.

Cara Membuat Widget Random Artikel

1. Buka tata letak pada blogger, untuk CMS lain menyesuaikan.
2. Pilih Add Html/JavaScript
3. Masukkan kode script berikut ini

  <style> 
#random-posts ul{background:#000000;margin:0 auto;padding:0;}
#random-posts li{list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 2px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em} 
#random-posts li a{color:#1c1207;font-size:14px;font-weight:600}
#random-posts li a:hover{color:#6fa600} </style>
<div id='random-posts'></div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'https://www.ensiklopedia1.com',
    maxResults = 15,
    containerId = 'random-posts';
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
function rewaysRandomPosts(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=rewaysRandomPosts"></scr' + 'ipt>');
//]]>
</script> 

4. Selesai.

Contoh tampilan Widget Random Artikel

Setelah memasang script widget random artikel Maka hasilnya adalah seperti ini:

Script diatas adalah versi non AMP alias tidak valid pengujian situs AMP. Mau yang valid AMP Version?