Cara membuat Random Post di Blog

Cara membuat random post keren khusus untuk blogspot

 Random post adalah sebuah widget yang menampilkan artikel secara acak yang terdapat pada sebuah blog.
Seperti yang kita ketahui bahwa, struktur bawaan dari blogspot hanya mampu menampilkan artikel terpopuler saja, maka untuk bisa menampilkan artikel secara acak, Anda harus menambahkan widget random post pada blogspot Anda.
Dengan menambahkan widget random post pada blog Anda, secara otomatis artikel blog Anda akan tampil secara acak.

Tujuan para blogger dari membuat random post di blog biasanya mereka menginginkan agar postingan lama mereka akan di baca kembali oleh pengunjung blog mereka, mungkin menurut mereka dengan membuat random post, artikel yang mereka anggap berkualitas itu masih berguna untuk pembaca blog mereka, maka salah satu cara agar postigan tersebut dapat terlihat kembali di blog, mereka menambahkan widget random post tersebut.


Nah pada kesempatan kali ini saya ingin berbagi tentang cara membuat random post keren di blogspot, namun apa bila Anda tertarik dengan cara membuat recent post dengan thumbnail keren di blog silahkan di baca. Untuk Anda yang mungkin memang sedang mencari widget random post keren, saya yakin Anda akan menyukai widget ini.

Gimana menurut Anda demo widget random post di atas? keren bukan dan kini apakah Anda mulai tertarik untuk membuat random post dengan gambar ini?

Cara Memasang Random Post di Blogspot

Dengan memasang random post di blog Anda, bukan hanya menampilkan artikel secara acak tetapi juga akan mempercantik blog Anda. Semakin tampilan blog menarik insya allah pengunjung blog Anda akan betah di blog Anda.

1. Seperti biasa silahkan masuk ke akun Blogger Anda. Lalu klik pada Layout > Add Gadget.

2. Lalu klik pada HTML/JavaScript.

3. Setelah itu copy paste code berikut di halaman kosong HTML/JavaScript

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 12px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 0px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 7;
var randomposts_chars = 110;
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 = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        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/AVvXsEgwcK0c6z6c6bfNoRHI7H5KiIb5N37HlvOw0BOiPIs8_s2hHXWxx-yXXtlvMqVJGC5n1RTZ9G1DxbublzXBCRyfYnMs5w-GU0BGm341j53-VaJ4-esx0LqEZy6KHG-2C2rGlJc1YvaODks/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></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>

4. Klik Save untuk menyelesaikan lalu lihat hasilnya

Cara Menyesuaikan Widget Random Post

Jika Anda ingin menampilkan lebih dari 5 postingan, rubah angka 5 parameternya. Untuk membuat tumbnail lebih besar, rubah warna hitam tebal: lebar pixel :65 px; dan tinggi : 65 px. Untuk menambahkan potongan text, rubah no ke yes di baris ini.

randomposts_details2 = 'no';

Untuk menambahkan potongan karakter, rubah angka 60 parameternya. Jika Anda ingin menyembunyikan tanggal postingan dan komentar, silahkan ganti yes ke no, di baris ini.

randomposts_details var = 'yes';

Silahkan berikan komentar Anda tentang cara membuat random post di blogspot di bawah ini.
Sumber: Buatblog.net
 
Semoga bermanfaat, Terimakasih sudah berkunjung