Skip to main content

Cara Memasang Widget Random Postingan pada Blog

KeyzeX - Widget ini merupakan salah satu fitur untuk meningkatkan Pageview atau menambahkan pengunjung ke dalam artikel yang sudah kita publikasikan. Widget ini, berguna untuk menampilkan artikel pada blog yang kita kelola secara acak. Sehingga, artikel yang sudah lamapun masih bisa di tayangkan kembali di Widget Random Postingan ini.

Cara Memasang Widget Random Postingan pada Blog


Namun pada widget ini juga memiliki kekurangan tersendiri, yaitu membuat blog kita menjadi agak lama pada saat loading. Tetapi dengan bantuannya sang master blogger Taufik Nurrohman yang mengedit script ini menjadi lebih ringan dan tidak menggangu lagi loading pada blog yang kita kelola, sehingga semuanya akan berjalan dengan lancar dan memungkinkan artikel yang sudah kalilan publikasikan akan menambah pengunjungnya.

Cara Memasang Widget Random Postingan :


  1. Pastikan agan sudah login pada www.blogger.com
  2. Pada bagian dashboard pilih Tata Letak > Tambah Widget Baru > HTML / Javascript dan masukan kode di bawah ini pada kolom yang disediakan
  3. <style scoped='' type="text/css">
    #KeyzeX-random ul{list-style:none;margin:0;padding:0}#KeyzeX-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;}
    #KeyzeX-random li:last-child{border-bottom:0;}
    #KeyzeX-random li a{color:#444;}#KeyzeX-random li a:hover{color:#444;text-decoration:underline}
    </style>
    <div id='KeyzeX-random'>Loading...</div>
    <script>
    //<![CDATA[
    // Random Post Widget
    var homePage = 'http://www.keyzex.blogspot.com',
        maxResults = 10,
        containerId = 'KeyzeX-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 KeyzeXRandomPosts(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=KeyzeXRandomPosts"></scr' + 'ipt>');
    //]]>
    </script>
  4. Simpan dan lihat hasilnya.

Catatan :
  1. Ganti text yang diberi Background Color menjadi blog yang agan kelola
  2. Ganti angka yang diberi Background Color dengan kebutuhan agan atau dengan Jumlah Artikel yang ingin agan tampilkan
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar