Cara Membuat Widget Random Post Tanpa Gambar (Thumbnail) Keren di Blog

Santos el Salam

25 Juni 2021

Saat sedang mengeksplore postingan-postingan lama, sering kali kita menjumpai cukup banyak postingan lama yang masih sesuai dengan zaman. Namun sayangnya, artikel-artikel tersebut kini tenggelam dan semakin sulit untuk ditemukan. Salah satu cara agar artikel-artikel tersebut bisa terbaca kembali oleh pengunjung adalah dengan menampilkannya pada widget blog. Tapi apakah ada widget yang memiliki fungsi seperti itu?. 

Pastinya bukan widget Recent Post karena fungsinya justru menampilkan artikel-artikel terbaru. Kalau Popular Post mungkin ada beberapa yang kadang muncul karena masih sering dibaca. Kalau widget artikel terlama kayaknya tidak ada, maka salah satu yang bisa menjalankan fungsi tersebut adalah widget Random Posts. 

Meski berfungsi menampilkan postingan secara acak, widget Random Post juga cukup efektif dalam menampilkan beberapa judul postingan lama agar muncul kembali. Bahkan ketika kita mereload halaman yang sedang dibuka, maka daftar postingan yang muncul pada widget ini pun akan selalu berubah sehingga akan lebih banyak postingan, baik baru maupun lama, yang tergali kembali. 

Untuk itu, kali ini Santos Blog kembali ke hadapan anda dengan membawa tutorial mengenai cara membuat widget Random Post dengan tampilan sederhana di blog. Karena tanpa gambar, maka widget ini tidak akan begitu mempengaruhi kecepatan blog anda sehingga loading tetap cepat dan ringan. 

Bagaimana cara membuatnya?. Silahkan ikuti langkah-langkah pemasangannya di bawah ini dengan teliti dan saksama. 

1. Buka akun blogger anda. 

2. Pilih menu layout (tataletak).

3. Klik tambahkan gadget (add gadget) lalu pilih html/javascript. 

4. Isi kolom judul dengan Random Post, Artikel Acak, Baca Juga, atau lainnya. 

5. Masukkan kode berikut ini ke dalam kolom di bawahnya. 

<style> 

#random-posts ul{background:#fff;margin:0 auto;padding:0;}

#random-posts li{list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 2px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em} 

#random-posts li a{color:#1c1207;font-size:14px;font-weight:600}

#random-posts li a:hover{color:#c00} </style>

<div id='random-posts'></div>

<script>

//<![CDATA[

// Random Post Widget

var homePage = 'https://hikayatmanfangat.blogspot.com',

    maxResults = 7,

    containerId = 'random-posts';

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 rewaysRandomPosts(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=rewaysRandomPosts"></scr' + 'ipt>');

//]]>

</script>

Keterangan:

• Ganti URL yang diberi tanda merah dengan URL blog anda. 
• Ganti angka 7 untuk mengatur jumlah postingan yang hendak anda tampilkan. 

6. Silahkan simpan (save) dan lihat hasilnya. 

Bagi anda yang menghendaki tampilan widget random post dengan gambar (thumbnail), silahkan baca: Cara Membuat Widget Random Post dengan Gambar di Blog.

Demikianlah tutorial kali ini mengenai cara membuat widget Random Post tanpa gambar (thumbnail) keren di Blog. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Membuat Widget Random Post Tanpa Gambar (Thumbnail) Keren di Blog. Please share...!

Facebook

Twitter