Membuat Random Post Dengan Thumbnail

Membuat Random Post Dengan Thumbnail - Widget Random Post atau artikel acak adalah sebuah widget yang menampilkan postingan atau artikel-artikel yang ada dalam blog secara acak/random. Dengan demikian bisa meningkatkan peluang untuk semua artikel agar bisa tayang di lihat oleh pengunjung.

Bisa dibayangkan jika sebuah artikel yang semestinya "berisi daging" karena tidak sempat terlihat oleh pengunjung akhirnya tenggelam begitu saja. Sangat disayangkan bukan?

nah dengan widget random post ini maka akan dimungkinkan artikel tersebut untuk muncul dan berpeluang untuk di baca oleh pengunjung sehingga bisa menjadikan sebuah artikel tersebut menjadi populer. Demikian juga artikel-artikel lama juga berpeluang untuk muncul ke permukaan kembali.

Selain itu memasang widget random post juga bisa untuk mengurangi bounce rate yang terjadi pada suatu blog, dan juga bisa membuat pengunjung lebih lama tinggal di blog tersebut karena terus menerus disuguhi artikel-artikel yang seperti diinginkannya. Tertarik untuk memasang widget ini di blog kamu?

Membuat Random Post Dengan Thumbnail

Oiya, pemasangan widget ini juga bisa untuk mendongkrak page views di blog kamu lho jadi tidak ada salahnya untuk mengaplikasikan widget ini di blog kamu. Widget ini sedikit berbeda dengan widget artikel terkait yang hanya menampilkan artikel lain dalam satu label atau kategori saja, namun widget ini bisa menampilkan artikel-artikel lain dari kategori yang berbeda-beda.

Jika sebelumnya sudah kita bahas mengenai cara memasang widget artikel acak tanpa gambar dan kali ini kita akan bagikan cara membuat random post dengan gambar atau thumbnail. Untuk membuat widget tersebut langkahnya sebagai berikut :

Buka dashboard Blogger
Pilih menu tata letak
Tambahkan gadget
Kemudian pilih HTML/Javascript
Selanjutnya copy dan paste-kan 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{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 = 10;

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=\"/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>

Nah demikianlah cara membuat random post dengan thumbnail di Blogger yang ternyata cukup mudah ya sehingga bisa di coba oleh siapa saja. Selamat mencoba.