Cara Membuat Rendom Post Dengan Gambar di Blog

Baca Juga

Cara Membuat Rendom Post Dengan Gambar di Blog – Widget Rendom Pos adalah widget yang memberikan informasi kepada pengunjung mengenai beberapa artikel di blog tersebut secara acak atau rendom. Rendom Post ini sangat cocok bagi pengunjung yang ingin mejelajahi isi dari blog tertentu, sehingga membuat pengunjung lebih lama berada di dalam post tersebut. Widget ini akan otomatis merendom post yang ada di blog sobat secara berurutan, sobat bisa atur kecepatan rendom, berapa artikel yang ingin di rendom hingga sampai ke awal lagi dan lainnya.

Fungsi dari widget ini sama dengan widget Populer pos atau Widget Artikel terbaru, hanya saja widget ini memiliki keunikan tersendiri yaitu dapat menampilkan daftar artikel lain secara acak. Widget Rendom Post dengan gambar ini sudah di sesuaikan dengan optimize image, yang akan memperbaiki skor Specify image Dimension baik itu di Template Seed maupun di sekor SEO. Bagi sobat yang berminat untuk memasangnya silahkan sobat ikuti cara membuatnya berikut ini.

Baca juga : Cara Memasang Persentase Pada Scrollbar

1. buka Blog Sobat > masuk menu “ Tata Letak” > Tambah Widget baru  > HTML/Java Script > salin kode di bawah ini dan letakkan kode tersebut kedalam widget yang baru saja sobat buat.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aZ4UVSKow2FHV90Fi9iEo32o198X9z5WQmqYs0VH9RtkIvak-um4RWgAiVvWRGEKi-9Lqd0QVzAsPRAMsSJQ7kX7Wn2eGRS87vAFcbuZeMxajov-W2CXGYDFHIzTsivIiX0XSX__9zA/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>

NB : Ubah angka 10 pada kode ver rendomposts_number = 10 untuk menampilkan berapa jumlah postingan yang ingin di masukkan ke dalam daftar Rendom post.

2. Terakhir simpan Setelan dan lihat hasilnya. Saya yakin jika sobat mengikuti tutorial di atas dengan benar maka rendom post sudah dapat tampil di blog sobat.

Baca juga : Cara Membuat Ricent Post HTML 5 Berdasarkan Label  di Blog

Demikianlah tutorial mengenai Cara Membuat Rendom Post Dengan Gambar di, yang harus di ketahui. jika sobat ada masalah atau sudah berhasil jangan lupa untuk mengisi Kotak komentar di bawah ini. Semoga artikel ini dapat menjadi ilmu yang bermanfaat.