Cara Membuat Widget Random Post (Artikel Acak) di Blog

Widget random post adalah widget yang di gunakan untuk menampilkan artikel secara acak, namun masih banyak yang belum tau cara memasang widget random post ini. Untuk itu pada artikel kali ini saya akan membahas mengenai cara membuat widget random post atau bisa di sebut artikel acak di blog WordPress dan juga Blogger.

Widget random post adalah salah satu wigdet yang saya rekomendasikan juga.

Bagi kalian yang ingin mendaftar Google AdSense, widget ini sangat di sarankan bagi saya.

Hal ini sudah saya bahas di artikel sebelumnya mengenai cara mendaftar Google AdSense.

Widget random post ini tentu saja memudahkan pengunjung untuk berkeliling blog kalian.

Apalagi jika artikel yang tampil di widget random post berhubungan dengan artikel yang di baca oleh pengunjung.

Bagi kalian yang ingin langsung menuju cara membuat widget random post di WordPress, kalian bisa klik link di bawah.

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://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/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>

Jika sudah, klik Simpan.

Jika berhasil, maka akan tampil seperti ini.

Untuk membuat demo dan mencoba semua wigdet random post ini, saya menggunakan template dari Mas Sugeng.

Semua widget di atas berjalan lancar tanpa hambatan.

Bagi kalian yang bermasalah pada saat menggunakan widget random post ini, saya sarankan kalian menggunakan template dari Mas Sugeng.

Seperti template VioMagz dan LinkMagz.

Beli Sekarang

Di artikel sebelumnya saya juga sudah membahas mengenai widget recent post atau bisa di sebut widget artikel terbaru.

Bagi kalian yang belum memasang widget recent post, silahkan masuk ke link di bawah ini.

Cara Membuat Widget Random Post (Artikel Acak) di WordPress

Di sini saya menggunakan plugin Advanced Random Posts Widget untuk menampilkan widget random post.

Langsung saja ikuti langkah dari saya berikut ini:

Langkah pertama login ke dalam blog WordPress kalian.
Geser kursor ke menu Plugin, kemudian pilih Tambah Baru.
Di kolom pencarian, cari plugin Advanced Random Posts Widget.
Jika sudah ketemu, klik Pasang Sekarang » Aktifkan.
Jika sudah aktif, geser kursor ke menu Tampilan » pilih Widget.
Scroll ke bawah, cari Random Posts.
Klik Random Posts, pilih lokasi widget (misalnya saya ingin Sidebar Kanan) » kemudian klik Tambahkan Widget.
Silahkan kalian atur widget random post, sesuai keinginan kalian.
- General: Untuk mengubah judul widget.
- Posts: Untuk mengatur jumlah postingan dalam widget.
- Taxonomy: Untuk mengatur widget berdasarkan label.
- Thumbnail: Untuk menampilkan Thumbnail gambar pada widget.
Jika sudah, klik Simpan.

Tampilannya akan muncul sesuai tema wordpress yang kalian gunakan.

Penutup

Demikian artikel dari saya mengenai cara membuat widget random post di blog.

Jika ada pertanyaan mengenai artikel ini, silahkan masukan ke dalam kolom komentar.

Jika ada typo, silahkan beritahu saya melalui kolom komentar.

Jangan lupa share artikel ini agar bermanfaat untuk orang lain.