Cara Membuat Widget Random Post yang Simple & Responsive di Blog

Hei guys, kali ini cara awesome akan membahas bagaimana cara memasang atau membuat widget random post (artikel acak) yang simple & responsive untuk blog Anda.

Random post adalah widget yang berfungsi untuk menampilkan artikel-artikel blog Anda secara acak. Dengan adanya Random post, artikel-artikel Anda yang viewsnya sedikit dapat ditampilkan di halaman pertama blog sehingga berpotensi dapat meningkatkan views untuk artikel-artikel tersebut. Tutorial ini saya dapatkan dari blog arlinadzgn.com dan widget ini saya letakkan di bagian sidebar blog. Untuk cara pemasangannya relatif cukup mudah, silahkan Anda ikuti langkah-langkah dibawah ini.

Langkah 1 : Login ke Blogger. Pilih menu Layout/Tata Letak.

Langkah 2 : Pilih lokasi untuk penempatan widget, klik Tambahkan Gadget, pilih HTML/Javascript.

Langkah 3 : Salin kode dibawah ini dan simpan di dalam kotak HTML/Javascript.

<style scoped='' type="text/css">
#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-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;}
#arlina-random li:last-child{border-bottom:0;}
#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}
</style>
<div id='arlina-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://arlinadzgn.com',
    maxResults = 10,
    containerId = 'arlina-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 ArlinaRandomPosts(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=ArlinaRandomPosts"></scr' + 'ipt>');
//]]>
</script>

Langkah 4 : Ganti bagian yang berwarna biru dengan link blog anda. Sesuaikan juga jumlah post yang ingin ditampilkan di bagian yang berwarna merah.

Langkah 5 : Klik Simpan. Selesai

Lihat dan cek blog Anda untuk melihat perbedaannya. Sampai disini seharusnya Anda sudah mengerti bagaimana cara memasang atau membuat random post di blog Anda sendiri. Sekian dan semoga bermanfaat.

Share artikel ini