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

byKurazone Net -

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!
Tags





Lebih baru Lebih lama