Cara Membuat Widget Random Post simple dan ringan pada Blogger

random post
Selain menampilkan postingan terbaru (recent post) pada template Blogger, kita juga dapat menampilkan posting secara acak (random post). Widget Postingan terbaru hanya akan menampilkan postingan baru, sedangkan Random Post akan menampilkan postingan pada widget secara acak dapat berupa postingan lama maupun postingan baru, jika halaman dibuka maka isi postingan acak (random post) selalu berbeda sehingga memperbesar peluang pageview blog.
Live Demo
Untuk Cara Membuat Widget Random Post simple dan ringan pada Blogger silahkan buka Tata Letak kemudian tambahkan Gadget HTML/JavaScript lalu copy paste code dibawah ini :

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

Catatan :
Angka 10 pada maxResults = 10 adalah jumlah postingan yang akan ditampilkan secara acak ,bisa diganti sesuai dengan kebutuhan anda.

Baca juga :

3 comments:

  1. makasih info.. berguna buat org banyak
    http://idr-news.blogspot.com
    http://harianindonesiasport.blogspot.com
    http://berita-malam-kita.blogspot.com/

    ReplyDelete

to Top