Cara Membuat Widget Random Post Thumbnail Kanan Keren

Santos el Salam

11 November 2019

Random Post adalah sebuah widget yang fungsinya adalah menampilkan daftar artikel sebuah blog secara acak (random). Dengan adanya widget ini, kemungkinan daftar semua artikel akan dimunculkan semua ketika salah salah satu artikel dibaca oleh orang per orang. Dilihat dari keberadaannya, sekilas widget ini mirip sebagaimana halnya Widget Popular Post, hanya saja fungsi yang keduanya berbeda. Jika popular post hanya menampilkan artikel-artikel populer yang banyak diminati oleh para pembaca, maka widget random post ini menampilkan judul artikel secara acak tanpa pandang artikel tersebut banyak yang membaca atau tidak, semua artikel pada gilirannya akan dimunculkan di widget ini.

Sebetulnya saya pernah membagikan tutorial pembuatan widget Random Post (Artikel Acak)  pada artikel yang telah lalu, namun tidak apa kali ini saya akan membagikan lagi tutorial yang serupa. Selain itu, mengapa saya membagikan tutorial kali ini adalah berkaitan dengan tutorial membuat widget random yang saya bagikan sebelumnya. Perlu diketahui bahwa meski script atau kode dari tutorial-tutorial blogging yang pernah saya bagikan memang bukan buatan saya, namun setiap sebelum saya membagikannya, semua sudah lewat ujicoba yang saya lakukan, baik lewat penerapan pada blog ini atau blog saya yang lain dengan template yang berbeda. 

Dari ujicoba-ujicoba ini saya jadi tahu bahwa bisa jadi karena suatu sebab, suatu script atau kode tidak berfungsi pada template tertentu yang berbeda. Seperti halnya script kode untuk widget random post dari tutorial terdahulu saya ini. Pada template bawaan blogspot, script kode ini berfungsi dengan baik, namun pada template-template tertentu seperti template premium atau template-template yang telah dikompresi agar semakin ringan, widget random post ini kadang tidak berfungsi. Oleh karenanya, pada tutorial kali saya hendak membagikan lagi tutorial membuat widget random post yang Insya Allah berfungsi di segala template. Berikut tampilannya:

Meski dengan tampilan yang hampir sama dengan yang sebelumnya, widget Random Post ini telah dioptimasi dengan baik, sehingga tidak akan mempengaruhi loading blog anda. Selain itu, meski ditampilkan dengan thumbnail gambar, widget random post ini juga tetap fast loading sehingga anda tidak perlu khawatir thumbnail gambar akan membuat loading blog anda menjadi lambat. 

Cara Membuat Widget Random Post dengan Thumbnail Sebelah Kanan

1. Buka akun blogger anda. 

2. Pilih menu tata letak (layout) dan klik tambahkan gadget. 

3. Pilih html/ javascript, beri judul Random Post atau sesuai selera anda dan masukkan kode berikut ini ke dalam kotak di bawahnya. 

<style type='text/css'>

#random-posts img{display:block;margin:0;margin-right:10px;padding:0;width:70px;height:70px;border:0px solid #f5f5f5;overflow:hidden;float:right}

#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:#000080;transition:all .3s;display:block}

#random-posts li:hover a,#random-posts a:hover{color:#008000;}

.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 #ddd;transition:all .3s;}

</style>

<ul id='random-posts'>

<script type='text/javaScript'>

var randomposts_number = 10;

var randomposts_chars = 0;

var randomposts_details = 'yes';

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/AVvXsEh0qu4ovpopp__CucZSvAtZTyC9jMfHm4Mnq2OOKhyphenhyphennnDfSElSnEJBhiiaOEax7UEzsupCZiUtOykwXyoD8KSGNYWSAX29i7ACj8gLZEcNHhcGRbtyt0QVYUHQry84qKB7SPH-_lCsinKDN/s1600/no_thumb.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></div>

Keterangan: angka 10 (berwarna merah) adalah jumlah artikel yang ditampilkan. Anda bisa merubahnya sesuai selera anda. 

4. Silahkan simpan (save) dan lihat hasilnya. 

Jika anda ingin agar thumbnail gambar berada di sebelah kiri pada umumnya, cukup ganti kode "right" (yang berwarna biru) menjadi "left" (tanpa tanda petik) dan gambar akan menjadi berada di sebelah kiri. Dan jika anda menerapkan pengaturan blog untuk versi mobile, anda bisa menampilkannya dengan menambahkan kode pengaturan mobile='yes' pada kode html widget yang anda pasang ini. Demikian, semoga bermanfaat. Sumber

Labels: Blogging

Thanks for reading Cara Membuat Widget Random Post Thumbnail Kanan Keren. Please share...!

Facebook

Twitter