Home
Blogger
Random Posts

Cara Membuat Random Post (Pos Acak) untuk Blogger

Pada kesempatan kali ini, saya akan membagikan informasi mengenai cara untuk membuat random post (pos acak) untuk blog atau web dengan platform Blogger. Random post dapat kalian letakkan di sidebar, halaman statis sebagai daftar isi acak atau dapat juga kalian letakkan di dalam artikel. Namun, kali ini saya akan memberikan contoh membuat random post untuk diletakkan di sidebar. Baiklah, tidak panjang lebar, berikut merupakan langkah yang dapat kalian gunakan.

Langkah Membuat Random Post di Sidebar

Pertama
Masuk ke beranda Blogger kemudian pilih Tata Letak.

Kedua
Tambahkan Widget dan pilih HTML/JavaScript

Ketiga
Kemudian, berilah judul widget, dan masukan kode di bawah ini di bagian konten.

<style>
#random-post-container ul {
  padding: 0 1em 0 0;
  margin: 0 !important;
  counter-reset: random-count;
}
#random-post-container ul li a {
  color: #2e2e2e;
  font-size: .9em;
  padding-left: 20px;
  position: absolute;
  font-weight:700;
  margin-top:-5px;
}  
#random-post-container ul li {
  display: list-item;
  list-style-type: "";  
  padding: 25px 0;
position:relative;
}  
#random-post-container ul li span {
  font-size:12px;
  font-weight:400;
}
#random-post-container ul li::before {
  content: '#' counter(random-count);
  counter-increment: random-count;
  width: 50px;
  font-weight: 700;
  font-size: 20px;
  width:50px;
}  
.dark-mode #random-post-container ul li a{
  color: #fefefe
} 
</style>
<div id='random-post-container'></div>
<script>
//<![CDATA[
// Feed configuration
var homePage = 'https://nama-blog.com', //ganti dengan url web atau blog kalian
    maxResults = 4, //ganti dengan banyaknya pos acak yang ingin kalian munculkan
    containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
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;
}
// Get a random start index
function createRandomPostsStartIndex(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>');
}
// Widget's main function
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 + '<br/><br/><span>Baca selengkapnya</span></a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>
Keempat
Pada bagian homePage, ganti https://nama-blog.com dengan url web atau blog kalian. Dan pada bagian maxResults ganti angka empat (4) dengan angka yang sesuai dengan jumlah pos yang ingin kalian tampilkan, tapi jangan melebihi jumlah pos yang kalian miliki.

Kelima
Simpan widget dan lihat yang terjadi.

Post a Comment