Cara Membuat Widget Random Post (Artikel Acak) di Blogger

Di sini saya akan memberikan beberapa desain widget random post.

Mulai dari yang tidak menggunakan thumbnail sampai yang menggunakan thumbnail.

Dan juga saya akan memberikan cara membuat widget random post berdasarkan label di blogger.

a. Cara Membuat Widget Random Post Ringan tanpa Thumbnail di Blogger

Widget ini di buat oleh blog Arlina Design, dan menjadi langganan saya.

Karena saya selalu menggunakan widget random post yang satu ini untuk mendaftar Google AdSense.

Langsung saja, ikuti langkah dari saya berikut ini:

Langkah pertama masuk ke dashboard Blogger kalian.
Pilih menu Tata Letak.
Kemudian klik + Tambahkan Gadget di sidebar atau di lokasi yang kalian ingin tampilkan.
Pilih HTML/JavaScript » klik icon +.
Masukan Judul widget kalian, misalnya Random Post.

Kemudian masukan kode di bawah ini pada kolom Konten.

<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://www.domain.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>

Ganti http://www.domain.com dengan domain kalian.
Ganti angka 10 dengan jumlah artikel yang ingin kalian tampilkan di widget random post.

Jika sudah, klik Simpan.

Jika berhasil, maka akan tampil seperti ini.

b. Cara Memasang Widget Random Post dengan Thumbnail di Blogger

Untuk widget random post dengan thumbnail, saya menggunakan kode dari blog Bungfrangki.

Langsung saja, ikuti langkah dari saya berikut ini:

Langkah pertama masuk ke dashboard Blogger kalian.
Pilih menu Tata Letak.
Kemudian klik + Tambahkan Gadget di sidebar atau di lokasi yang kalian ingin tampilkan.
Pilih HTML/JavaScript » klik icon +.
Masukan Judul widget kalian, misalnya Random Post.

Kemudian masukan kode di bawah ini pada kolom Konten.

<style type='text/css'>
#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:72px;height:72px;border:1px solid #f5f5f5;overflow:hidden;float:left}
#random-posts img:hover{opacity:0.6;}
ul#random-posts{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;min-height:65px;position:relative;border-bottom:1px solid #f5f5f5;transition:all .3s;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 0;
var randomposts_details = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {
    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts"></script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random();
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxzvk_N_kwwPH_NB_LwLhlsgljYQdOgwgMAoa-6-tDLA-aAnZoVcploN784IPmKkFEsbFvhtmD12Nr-04pPvVQ-bUEHkVxwrom3qWfsbunHSL1PCUlWTYUrpBDBYqWcHcpwLF7sAH8C0g/s1600/bungfrangki_no_image_100.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '" width="' + 72 + '" height="' + 72 + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>')
    }
};
getvalue();
for (var i = 0; i < randomposts_number; i++) {
    document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts"></script>')
};
</script>
</ul>
<div class='clear'/>
</div>

Ganti angka 5 pada var randomposts number dengan jumlah artikel yang ingin kalian tampilkan di widget random post.

Jika sudah, klik Simpan.

Jika berhasil, maka akan tampil seperti ini.

c. Cara Memasang Widget Random Post Berdasarkan Label di Blogger

Untuk widget random post berdasarkan label ini saya ambil referensi dari blog lama saya, yaitu Tutorial Umum.

Langsung saja, ikuti langkah dari saya berikut ini:

Langkah pertama masuk ke dashboard Blogger kalian.
Pilih menu Tata Letak.
Kemudian klik + Tambahkan Gadget di sidebar atau di lokasi yang kalian ingin tampilkan.
Pilih HTML/JavaScript » klik icon +.
Masukan Judul widget kalian, misalnya Random Post.

Kemudian masukan kode di bawah ini pada kolom Konten.

<script type="text/javascript">
var acakarray = new Array();var l=0;var flag;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}
if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>

<script src="/feeds/posts/default/-/Label?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Ganti angka 5 pada var numofpost dengan jumlah artikel yang ingin kalian tampilkan di widget random post.

Ganti Label dengan kategori blog kalian, huruf besar dan kecilnya harus sesuai.Contoh kategori/Label: Computer Hardware

<script src="/feeds/posts/default/-/Computer%20Hardware?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>