Cara Menambahkan Random Post Dengan Gambar dan Judul Artikel

Cara Menambahkan Random Post Dengan Gambar dan Judul Artikel - Seperti yang telah saya jelaskan sebelumnya bahwa random post berisi artikel yang dipilih secara acak baik itu artikel populer, artikel baru maupun artikel lama dapat di tampilkan pada random post. Yang membedakanya dengan artikel baru, tentu saja pada recent post berisi semua artikel yang baru saja kita publish. Anda dapat menampilkan sampai sepuluh artikel, begitu juga dengan popular post merupakan artikel yangp paling sering di lihat oleh pengunjung blog Anda. Maksimal juga menampilkan sepuluh artikel.

Pada artikel sebelumnya telah saya share cara membuat random post dengan hanya menampilkan gambar saja. Pada kesempatan ini saya akan berbagi cara menambakan random post dengan gambar dan judul artikel. Cara memasukan kodenya sama dengan yang sebelumnya, yaitu :

1. Login ke draft.blogger Anda.

2. Klik Tata Letak

3. + Tambah Gadget

4. + klik HTML/ JavaScript

5. Pada kotak yang muncul, silahkan isi pada bagian judul dengan nama " Random Post ", sedangkan bagian konten dengan kode di bawah 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 = 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/AVvXsEi5ujng3WVHrWYtjVq55aCsGBS4aiaQ3XZhOm4U62133FH1WNj8EHqV08V3j0KCngqcelMiDGzK2FslQRAFPYbscE106qIWyHFlKayjZBRJIi1ChLPf4NyirrEbzu3bkvmPs_9w8okm4SE/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>

6. Simpan. Maka hasilnya seperti pada gambar di atas.  

Sebagai tambahan, Random post ini juga berfungsi untuk meningkatkan traffik blog Anda dengan pengunjung membuka artikel Anda mulai dari yang lama hingga yang terbaru. Semoga bermanfaat ya.

Sumber : http://www.bungfrangki.com