Cara Membuat Random Post di Blog

Arsipbiru.com - Pada kesempatan kali ini, saya akan membagikan tutorial bagaimana cara membuat random post di blog. Random post adalah salah satu widget yang menampilkan artikel secara acak. Umumnya, random post diletakkan di bawah artikel atau sidebar blog. Terdapat berbagai macam style random post, mulai dari tanpa random post tanpa thumbnail hingga random post dengan thumbnail.

Random post tanpa thumbnail merupakan variasi dari random post yang hanya menampilkan judul artikel saja secara acak tanpa adanya potongan gambar (thumbnail) yang menyertainya. Variasi ini memiliki style yang cukup banyak dan tentunya sangat ringan. Variasi ini biasa diterapkan pada blog yang cukup berat. Sehingga tidak menambah beban loading blog.

Sementara, random post dengan thumbnail merupakan variasi random post yang tidak hanya menampilkan judul artikel saja secara acak, melainkan juga potongan gambar (thumbnail) dari artikel tersebut. Variasi random post ini juga memiliki style yang cukup banyak. Hanya saja variasi ini cukup berat karena harus menampilkan thumbnail di setiap acakannya. Jadi, variasi ini kurang cocok dengan blog yang berat.

Nah, Anda tertarik yang mana, ya? Random post dengan thumbnail atau tanpa thumbnail? Tentunya hal tersebut tergantung selera masing-masing. Toh, fungsi dari random post sendiri adalah agar memudahkan pengunjung untuk berkeliling menjelajahi blog Anda. Apalagi artikel yang tampil di random post berkaitan dengan apa yang sedang dicari oleh pengunjung.

Cara Membuat Random Post di Blog

Untuk membuat widget random post atau biasa disebut dengan artikel acak, Anda hanya perlu menyalin barisan kode-kode di blog Anda. Jadi, tidak perlu repot-repot menulis barisan kode yang cukup rumit secara manual. Disini saya akan membagikan tutorial membuat random post di Blogger maupun di WordPress. Silahkan Anda sesuaikan dengan platform yang sedang Anda gunakan.

Cara Membuat Random Post di Blogger

Disini terdapat beberapa style widget random post yang dapat Anda pilih sesuai selera. Namun, sebelum itu, silahkan simak dengan seksama langkah-langkah berikut ini.

1. Pertama, masuk ke akun Blogger masing-masing.

2. Lalu, pilih tab menu Tata Letak > klik + Tambahkan Gadget. Disini Anda bebas meletakkan widget random post. Anda bisa meletakkannya di sidebar atau lokasi yang lain untuk menampilkannya.

3. Selanjutnya, pilih HTML/JavaScript dan masukkan kode berikut ini sesuai pilihan Anda di kotak yang telah tersedia.

4. Terakhir, klik Simpan dan lihat hasilnya.

Random Post Tanpa Thumbnail ala ArlinaDzgn

<style scoped='' type="text/css">

#arlina-random ul{list-style:none;margin:0;padding:0}#arlina-random li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-word;padding:10px 0;margin:0;}

#arlina-random li:last-child{border-bottom:0;}

#arlina-random li a{color:#444;}#arlina-random li a:hover{color:#444;text-decoration:underline}

</style>

<div id='arlina-random'>Memuat...</div>

<script>

//<![CDATA[

// Random Post Widget

var homePage = 'http://www.domain.com',

    maxResults = 10,

    containerId = 'arlina-random';

function getRandomInt(min, max) {

    return Math.floor(Math.random() * (max - min + 1)) + min;

}

function shuffleArray(arr) {

    var i = arr.length, j, temp;

    if (i === 0) return false;

    while (--i) {

        j = Math.floor(Math.random() * (i + 1));

        temp = arr[i];

        arr[i] = arr[j];

        arr[j] = temp;

    }

    return arr;

}

function ArlinaRandomPosts(json) {

    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));

    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));

    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');

}

function randomPosts(json) {

    var link, ct = document.getElementById(containerId),

        entry = shuffleArray(json.feed.entry),

        skeleton = "<ul>";

    for (var i = 0, len = entry.length; i < len; i++) {

        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {

            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';

        }

        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';

    }

    ct.innerHTML = skeleton + '</ul>';

}

document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=ArlinaRandomPosts"></scr' + 'ipt>');

//]]>

</script>

Random Post dengan Thumbnail ala Bungfrangki

<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/AVvXsEgRIIX5r-Qmf61p9UmssUM6oh60vaEjUnD-h3nZSnqQp6_Tg6a3A7B05XElqOxGVuJ_5M2Iutc7OGSR3rsD2SXZaTVp3D3jrMbUPXvSyLLwryJ12CBKFh_2pRb51bj4jiQYP8mttMro7hE/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>

Random Post Berdasarkan Label ala Tutorial Umum

<script type="text/javascript">

var acakarray = new Array();var l=0;var flag;

var numofpost=5;

function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}

if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');

for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

</script>

<script src="/feeds/posts/default/-/Label?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Cara Membuat Random Post di WordPress