Cara Memasang Widget Random Post di Blog

2/28/2016
Cara Memasang Widget Random Post di Blog - Widget random post merupakan salah satu fitur penting dalam meningkatkan pageview pada sebuah blog. Widget tersebut, berguna untuk menampilkan artikel pada blog secara acak. Sehingga, artikel lama yang belum terlihat oleh pengunjung secara maksimal berpotensi dapat dibuka kembali.

Cara Memasang Widget Random Post di Blog

Namun kebanyakan blogger sering berpikir dua kali untuk memasang suatu widget, karena dinilai akan menambah beban loading pada blog. Akan tetapi, dari hasil blogwalking di blog +Taufik Nurrohman yang merupakan salah satu blogger jagoan di Indonesia, di sana ada tips sederhana untuk membuat widget random post yang cepat dan ringan.

Tampilan dari widget ini tidak berbeda dengan tampilan widget recent post yang pernah Saya bagikan di blog Arlina Design

Baca juga. : Cara Memasang Recent Post Widget di Blog

Cara penerapannya pun cukup mudah, sobat hanya perlu menambahkan kode ke dalam widget baru di blog. Berikut cara penerapannya :

1. Buka Blogger > Klik Tata Letak > Tambahkan widget baru > Salin dan simpan kode di bawah ini di dalamnya

<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.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>

Catatan : Ganti kode yang ditandai dengan url blog sobat dan jumlah artikel yang akan ditampilkan

2. Simpan widget dan lihat hasilnya.




Semoga bermanfaat.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

3 comments

mau tanya nih , kalau dimunculin gambar caranya gimana ?

Balas

Ini hanya bentuk link saja

Balas

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.