Cara Mudah Memasang Widget Random Post di Blog

Cara Mudah Memasang Widget Random Post di Blog. 
halo sobat semuanya, kembali lagi bersama saya di blog tutorial yang sederhana ini. Dan sebelumnya saya juga mengucapkan terimakasih atas waktunya telah berkunjung ke blog ini, semoga blog saya yang sederhana ini bisa memberikan manfaat buat kalian semuanya.

Mungkin dari kalian ada yang bertanya, apa sih Widget Random Post itu? Yups, betul sekali, dari namanya saja sudah ketahuan yaitu "Random Post" yang artinya postingan acak atau postingan yang ditampilkan secara acak. Jadi yang akan kita buat kali ini itu, akan seperti gambar dibawah ini :

Cara Mudah Memasang Widget Random Post di Blog - Contoh Random Post

Cara Mudah Memasang Widget Random Post di Blog. Ok guys, jadi seperti itu tampilannya, dimana random post ini akan menampilkan artikel yang diambil secara acak, tentunya artikel yang ada di blog kita sendiri. Bagaimana cara membuatnya? penasaran? langsung saja ke TKP.

Login ke Blog 

pertama temen-temen sekalian login dulu ke blog kalian, kemudian pada panel sebelah kiri cari pilihan "Tata Letak" seperti pada gambar dibawah ini : 

Cara Mudah Memasang Widget Random Post di Blog - Tata Letak

 maka jika kalian sudah membuka menu Tata Letak maka akan tampil layout dari blog kalian. Pada layout blog tersebut pilih menu "Tambah Widget", maka akan tampil popup dan pilih menu "HTML/JavaScript" seperti gambar dibawah ini : 

Cara Mudah Memasang Widget Random Post di Blog - Menu Widget

 kemudian pada kota pertama pada bagian Judul, isikan dengan nama judul widget yang kalian kehendaki (bebas diisi dengan judul apapun). Jika sudah menentukan judul, pada bagian konten isikan dengan kode javascript seperti dibawah ini : 
 

<style scoped="" type="text/css">
#gudio-random ul{list-style:none;margin:0;padding:0}#gudio-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}
#gudio-random li:last-child{border-bottom:0;}
#gudio-random li a{color:#444;}#gudio-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id="gudio-random">
Memuat Post...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'https://guz-kopyok.blogspot.com/',
    maxResults = 10,
    containerId = 'gudio-random';
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 GudioAcak(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=GudioAcak"></scr' + 'ipt>');
//]]>
</script>

Cara Mudah Memasang Widget Random Post di Blog - Kode Widget

Pada bagian homePage pada kode diatas, ganti alamat web atau blog dengan alamat website atau blog kalian. Kemudian pada bagian maxResult, kalian bisa tentukan berapa jumlah post yang ingin kalian tampilkan pada Random Post Widget

oke guys, gimana? cukup gampang kan? tinggal tempel kode langsung jadi widgetnya. Untuk artikel kali ini, saya cukupkan sampai disini dulu guys. Semoga artikel ini bisa memberikan manfaat atau mungkin bisa membantu agan-agan atau aganwati sekalian dalam membuat widget random post.

oke, kita ketemu lagi di artikel selanjutnya, tentunya artikel yang tidak kalah menariknya. Seee uuu...