Cara Membuat Random Post Dengan Gambar/Thumbnail Keren Di Blogspot

Hai gais! Widget random post sangatlah penting untuk ditempatkan di blog. Apalagi jika blog anda bertemakan magazine pasti akan melengkapi property blog yang kurang. Cara membuat widget random post di blogger sangatlah mudah,anda hanya perlu menambahkan beberapa kode di tata letak blog sobat.

Widget random post ini hampir dengan widget populer post,yaitu untuk menampilkan daftar artikel,namun perbedaannya terletak pada artikel yang ditampilkan.Populer post untuk menampilkan artikel yang populer,sedangkan random post bisa anda ketahui dibawah ini. Widget random post ini akan terus bergerak/berjalan maksudnya jika laman direfresh maka post dirandom post akan berganti.

Apa itu Random Post?

Namun tahukah anda apakah itu random post? Random post bisa diartikan post acak. Diambil dari kata random yang berarti acak dan post yang bisa diartikan postingan/artikel. Random post sendiri berisi daftar artikel yang muncul secara acak. Jika pengunjung mengunjungi laman lain di blog anda maka isi dari widget random post juga akan berubah.

Random post biasanya digunakan untuk pelengkap untuk mengisi sidebar atau footer yang kosong. Atau juga untuk menambah-nambah tampilan blog anda. Tertarik untuk memasang random post,ikuti langkah dibawah :

Cara Mudah Membuat Widget Random Post 

#1. Silakan buka dasbor blogger → Tata Letak/Layout → Tambahkan Gadget (akan muncul popup)  → HTML/JavaScript

#2. Salin kode dibawah ini lalu pastekan di popup untuk menambahkan gadget tadi

<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{background:#fff;list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none;}
#random-posts a{color:#64707a;transition:all .3s;display:block}
#random-posts li:hover a,#random-posts a:hover{color:#4285f4;}
.random-summary{font-size:13px;color:999}
#random-posts li{background-color:#fff;margin:0;padding:10px;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/AVvXsEjWZlj7pQEXVUG7yVHCqVh85RtoZj1lTqPfTxLhoH7EFUKsrnn-gYNCQX8CzxgIRLigImrR44Ct2jtASlVWcMKHkLGEFf6DB6yeUKd4iaq-FQfxvM8z6mV8ngE0OX9xrZ4tT5QU1G7R-Vs/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=\"/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>

Perhatikan kode yang berwarna merah,ganti angka 10 dengan jumlah post yang ingin ditampilkan

Lalu klik Simpan

Selesai coba cek blog sobat widget random postnya udh muncul atau belum. Itulah tutorial cara membuat widget random post keren di blog. Semoga bermanfaat dan membantu.