Home / Tutorial Blogger / Widget

Cara Mudah Membuat Widget Random Post Dengan Gambar

by Tambun Erland 20:39

Cara Mudah Membuat Widget Random Post Dengan Gambar

Widget Random Post Dengan Gambar

Widget random post untuk blogger dapat meningkatkan keterlibatan pengunjung dengan menampilkan beberapa postingan yang akan dimunculkan secara acak, bukan berdasarkan label atau kategori terkait.Random post yang muncul bisa saja adalah yang terpopuler, terlama, atau terbaru. Ini bagus untuk mengangkat kembali postingan yang sudah sangat lama diterbitkan bisa kembali dibaca oleh pengunjung blog.

Tampilan widgetnya kira-kira akan seperti gambar diatas, widget random post ini dirancang untuk sidebar blog tapi bisa juga diterapkan di footer blog sobat. Hal penting lainnya adalah, widget ini responsif sehingga widget ini akan beradaptasi dengan lebar sidebar blog kamu secara otomatis.

Caranya sangat gampang, copy dan pastekan kode di bawah ini di gadget sidebar blog sobat

<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/AVvXsEjbV-Oag-5sQGmKaqhYrB8OsbH-fW6gY55lzqD5Bu5rRyQ6y6DqIXuWwxqEEug36LKjCypGwmTZTh7-J6OMILciJTW4EMBqAfIo55ks1fOWZap2Fhd3VzhjWBIxiLxPBuxXQuu17j2Lhg/s1600/tamboenman_com_no_image.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>

Ganti angka 5 pada kode var randomposts_number = 5; sesuai keinginan sobat berapa postingan yang akan tampil di blog

Simpan dan lihat hasilnya

You may like these posts: