Cara Membuat Widget Random Posts by All Posts atau by Labels di Blogger


KURAZONE
~ Halo sahabat Kurazer, membahas tentang cara mempercantik suatu tampilan blog memang gak ada habisnya ya. Kali ini saya bagikan informasi mengenai membuat Widget Random Posts dengan tampilan yang sangat-sangat sederhana. Kurang lebih seperti inilah tampilannya.

Catatan gak penting!!
Sebenarnya saya agak bingung mau ngasih judul apa di artikel ini, karena kode ini memiliki 2 versi pengaturan:
  1. Menampilkan postingan secara random yang diambil dari semua postingan blog.
  2. Menampilkan postingan secara random yang diambil berdasarkan label artikel yang dipilih.
Intinya : Random Posts by All Posts atau Random Posts by Labels.
Jika bingung maksdunya, mending praktek aja biar paham :v

Berikut adalah Cara Membuat Widget Random Posts by All Posts atau by Labels

1. Copy 1 paket kode 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://2.bp.blogspot.com/-F1lTdmXTr0Y/VmpR_HBcVyI/AAAAAAAAGa8/a2_2T-p3AKM/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://www.kurazone.net/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
3. Pilih menu tata letak dan buat Gadget baru
4. Pilih jenis HTML/Javascript
5. Paste kode tersebut ke bagan isi Gadget baru
6. Simpan

Ganti URL Blognya

Selanjutnya tinggal kalian ganti saja URL www.kurazone.net dengan URL yang kalian inginkan
  • misal : https://www.domainmu.com/feeds/posts/default

Jika ingin tampil berdasarkan label

Apabila kalian menginginkan widgetnya menampilkan postingan acak berdasarkan label, maka cukup tambahkan /-/nama label setelah default
  • misal : https://www.kurazone.net/feeds/posts/default/-/Kesehatan

Mengatur jumlah postingan yang tampil

Lalu, untuk berapa jumlah postingan yang akan ditampilkan, cari saja : var randomposts_number = 5; lalu ganti angka 5 nya sesuai dengan jumlah yang diinginkan.
  • misal : var randomposts_number = 10;
Sisanya bisa kalian eksplor sendiri. Itulah informasi mengenai "Cara Membuat Widget Random Posts by All Posts or by Labels di Blogger", selamat mencoba dan semoga bermanfaat. Goodluck!