Cara Menampilkan Random Post Sederhana Pada Blogger

Sampai hari ini tidak terasa sudah membuat artikel banyak melalui blog Sebardi. Sesekali saya tengok draft artikel yang juga menumpuk. Dan ternyata ada juga draft yang disusun sudah berumur lama. Namun ternyata tidak kunjung dipublikasikan hingga tenggelam hingga dasar. 

Kemudian saya cek salah satu screenshoot yang tampil pada halaman awal. Ternyata menunjukan tahun 2016 ketika awal-awal mulai jatuh cinta dengan blogger. Maklum sebelumnya lebih suka dengan wordpress karena dimanjakan dengan plugin.

Settelah itu saya coba edit isi artikelnya dengan harapan bisa dipublish untuk menambah literatur. Kali ini tentang cara menampilkan random post sederhana pada blogger. Script minimalis ini dibutuhkan oleh para pembuat theme blogger yang mementingkan kecepatan loading.

Iya, meskipun mengenal sudah lama tapi beberapa akhir tahun baru bisa membuat theme sendiri. Untuk itu, arsip lama ini pun saya coba publish biar bisa membantu mengembangkan kemampuan itu. Terutama pada saat memberi variasi widget yang berbeda antara satu theme dengan theme lainnya.

Jika teman-teman termasuk membutuhkan literatur tersebut yuks kita coba salah satu script di bawah ini. Mudah-mudahan, artikel dengan tema lama ini bisa menambah keaneka ragaman tampilan random post yang kali ini menghasilkan penampakan yang sangat sederhana. 

Cara Menampilkan Random Post Sederhana Pada Blogger

Script widget random post yang beredar ada yang tampak sederhana dan ada yang disertai thumbnail. Fungsi widget ini untuk menampilkan artikel secara acak baik postingan lama maupun terbaru. Namun sesuai namanya, script ini menghasilkan tampilan sebatas judul dan tanpa disertai thumbnail, jumlah komentar beserta ringkasannya. Jadi, widget blogger ini benar-benar sangat sederhana. 

Mungkinkah script random post seperti ini yang sedang Anda cari? Jika benar demikian mari kita simak tahapan selengkapnya agar postingan secara acak bisa ditampilkan secara sederhana.

1. Login ke dashboard Blogger.

2. Klik "Tata Letak" atau "Layout".

3. Pada contoh screenshoot di atas diambil dari blogger pada masa klasik.

4. Langkah selanjutnya silahkan klik "Tambahkan Gadget" pada bagian sidebar.

5. Pilih HTML/JavaScript.

6. Beri judul, misalnya "Random Post" dan pastekan kode berikut pada bagian Konten:

<script type='text/javascript'> var relatedpoststitle=""; </script> <script type='text/javascript'> var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break; } } } } function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; } } relatedTitles = tmp2; relatedUrls = tmp; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } function printRelatedLabels() { for(var i = 0; i < relatedUrls.length; i++) { if(relatedUrls[i]==currentposturl) { relatedUrls.splice(i,1) relatedTitles.splice(i,1) } } var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; if(relatedTitles.length>1) document.write('<ul>'); while (i < relatedTitles.length && i < 20 && i<maxresults) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0; } i++; } document.write('</ul>'); } </script> <div id="categorylist"> <script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&callback=related_results_labels&max-results=10"></script> <script type="text/javascript"> var currentposturl=""; var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(); </script> </div>

7. Untuk lebih jelasnya bisa lihat gambar dibawah ini:

8. Kemudian, pilih Simpan Setelan.

9. Hasilnya akan tampak seperti tampilan di bawah ini.

10. Script di atas menampilkan banyaknya postingan acak sebanyak 10 judul artikel. Jika mau diubah, silahkan ganti nilai "10" pada script diatas tepatnya pada bagian ini:

var maxresults=10;

11. Sedangkan kode untuk mengubah tampilan widget random post di atas bisa dengan menambahkan script di bawah ini.

#categorylist{float:left; margin-top:0px; margin-bottom:10px} #categorylist ul{float:left; margin:0px; margin-left:20px; padding:0px; font-size:11px} #categorylist li{list-style:disc outside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnnYa5uZuV0ELsWf3xr5M-lGwe7UF9x8iCIpT-PC9SviLVhpX9wd0KzKJ2jkwMYUlIDzZUqk3nrRa2Z_oF_3424JUQuBAAdTCVzeYCq3Lm65W8rZI7-8Heh3QtoD1hr79vZPtq67sj13in/s1600/bullet-point-image-8.png"); width:auto; margin-bottom:0;margin-top:0;padding:0;vertical-align:middle;} #categorylist a{font-family: "Droid Sans",arial,sans-serif;text-decoration:none; color:#1C262F; font-size:12px} #categorylist a:visited {color:blue; text-decoration: none} #categorylist a:hover{color:green}

12. Pastekan kode di atas sebelum tag ]]></b:skin>, gunakan Ctrl+F untuk memudahkan pencarian.

13. Simpan template dan hasilnya akan terlihat seperti screenshot di bawah ini:

14. Selesai.

Kesimpulan

Script random post sederhana di atas saya dapatkan dari justnaira.com sejak lama. Dan script tersebut dipraktekan dengan theme bawaan blogger yang juga terlihat sederhana. Namun seiring waktu saya mencoba membuat theme blogger sendiri dari nol. Hingga akhirnya bisa membuat 2 theme blogger dimana satunya berdasarkan bootstrap sedangkan satunya lagi Halfmoon.

Sayangnya, untuk sementara ini belum berhasil mengembangkan varian dari template yang sudah jadi. Padahal sebelumnya sempat berharap bisa menciptakan banyak varian theme blogger. Dimana, masing-masing theme tersebut mempunyai ciri khasnya sendiri. Salah satuya adalah tampilan random post yang terlihat sederhana seperti pada contoh di atas. 

Mudah-mudahan nanti bisa direalisasikan ya.

Baca Juga