Cara Membuat Widget Random Posts Sederhana di Blogger

 

Halo Guys Wellcome back to my blog, kali ini saya akan membahas tentang cara mempercantik suatu tampilan blog yang gak akan ada habisnya. Kali ini saya membagiakan informasi mengenai "Cara membuat Widget Random Posts" dengan tampilan yang sangat-sangat sederhana. Untuk tampilannya kurang lebih seperti gambar di bawah ini.

 

Catatan yang sangat gak penting :( !!

Sebenarnya saya sendiri agak bingung mau ngasih judul apa pada artikel ini, karena kode ini memiliki 2 versi peraturan yaitu:

1. Menampilkan postingan secara random yang di ambil dari semua posingan blog kalian.

2. Menampilkan postingan secara random yang di ambil berdasarkan label artikel yang kalian pilih. 

 

Intinya : Random Posts by All posts/label. Jika kalian bingung saya juga bingung harus di jelaskan gimana lagi hehe, mending langsung praktek aja biar paham.

Berikut ini Cara Membuat Widget Random Posts All Posts/Lebels

1. Copy 1 paket code dibawah ini.

<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{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#000;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#0088ff;}
.random-summary{font-size:13px;color:999}
#random-posts li{margin:0;padding: 0px 0px 10px 0px;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm0WrfUOrFoUQ6y_BK6O56Kw3241kPHcjqKZUpOMnm1hikOUMJ2p07uUDcuTLnKNO5gs5vxLyseKyNhRGzjfaj1Q0E5vcPIBIVU5kk-eOhEbwpmuWoo1jbTVQLUZAAluEeZ2TjzPkft4M/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=\"https://bloggerpademawu.blogspot.com/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>

2. Masuk ke akun Blogger kalian.

3. Pilih menu tata letak dan buat Gadget baru.

4. Pilih jenis HTML atau Javascript.

5. Paste kan code yang tadi sudah kalian copy ke bagian Gadget baru.

6. Simpan.

Ganti URL Blognya

• Selanjutnya tinggal kalian ganti saja URL bloggerpademawu.blogspot.com dengan URL blog yang kalian inginkan.
• Misal : https://bloggerpademawu.blogspot.com/feeds/posts/default

Jika ingin tampilan berdasarkan Label

• Apabila kalian mengingikan widgetnya menampilkan postingan acak berdasarkan label blog kalian, maka cukup tambahkan /-/nama label setelah default 

• Misal : https://bloggerpademawu.blogspot.com/feeds/posts/default/-/Pendidikan

Mengatur jumlah postingan yang akan ditampilkan

• Lalu bagaimana cara untuk menampilkan jumlah postingan yang akan di tampilkan ? Cari saja : var randomposts_number=5; lalu ganti angka 5 nya sesuai dengan jumlah yang diinginkan.

• Misal : var randomposts_number=10;

Itulah informasi yang bisa saya sampaikan mengenai "Cara Membuat Widget Random Posts Sederhana di Blogger". Selamat mencoba dan semoga bermanfaat. Mator sakalangkong *Bahasa Madura*