-->

Cara Membuat Widget Random Post simple dan ringan pada Blogger

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.

Anda mungkin menyukai postingan ini

4 komentar

  1. Manuk Merak
    ddddd
  2. Unknown
    blogwalking, happy blogging
  3. KARINA WENNY
    makasih info.. berguna buat org banyak
    http://idr-news.blogspot.com
    http://harianindonesiasport.blogspot.com
    http://berita-malam-kita.blogspot.com/
  4. Dwi Ari wijaya
    Makasih gan ane lagi nyari nih
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>