loading...

CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL DI BLOG ATAU WORDPRESS

CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL PADA BLOG ATAU WORDPRESS


CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL DI BLOG ATAU WORDPRESS - Random Post merupakan sebuah widget yang sangat bermanfaat untuk sebuah Blog/Web, bahkan menurut saya lebih bermanfaat ketimbang widget Popular Post atau Recent Post. Kenapa? Karena Widget Random Post dapat menampilkan semua postingan yang ada di Blog/Web kita baik yang lama ataupun baru secara acak sehingga postingan lama dan jarang dibaca pun tetap di tampilkan sehingga tidak ada postingan yang tertimbun.

Sebelumnya saya pernah memposting cara membuat Random Post tanpa Thumbnail, baca postinganya disini. Nah, untuk kali ini kita akan akan membahas cara untuk membuat random post dengan thumbnail atau gambar untuk Blog ataupun Wordpress. Oke langsung saja untuk cara membuatnya.

1. Pertama masuk ke Dasboard Blogger atau Wordpress anda.
2. Buat Gadget/Widget baru di sidebar, beri nama Random Posts atau terserah anda, atau tidak di beri nama pun tak masalah.
  • Blogger : Layout >> Add A Gadget >> HTML/Javascript
  • Wordpress : Widget >> HTML/Javascript

3. Copy Kode di bawah ini kemudian Paste ke Widget/Gadget yang barusan kita 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 = 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://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>
4. Terakhir Save / Simpan. Done

Keterangan : Pada bagian atas kode terdapat kode yang saya beri warna Merah.

  • Angka 5 pada "randomposts_number" merupakan jumlah judul posting yang nantinya di tampilkan, bisa di rubah sesuai selera anda.
  • no pada pada "randomposts_details" dapat anda rubah menjadi yes jika anda ingin menampilkan tanggal dan jumlah komen.

Sekarang coba anda cek hasilnya dengan membuka halaman blog/worpress anda. Jika pemasangan sudah benar seharusnya random post akan muncul.

Nah, seperti itulah sekiranya langkah-langkah dalam membuat random post. Jika ada yang masih kurang jelas dan ada yang ingin di tanyakan, langsung saja anda tanyakan melalui kolom komentar di bawah atau langsung ke kontak saya.

Sekian, semoga bermanfaat, Terima Kasih..


Subscribe to receive free email updates:

0 Response to "CARA MEMBUAT RANDOM POST DENGAN THUMBNAIL DI BLOG ATAU WORDPRESS"

Post a Comment

Terima Kasih Sudah Berkunjung.. Jika berkenan silahkan berikan komentar Anda mengenai artikel atas.. Setiap Kritik ataupun Saran yang Anda berikan sangat berguna untuk perkembangan dan kemajuan Blog ini..