Cara Membuat Postingan Acak Disertai Thumbnail

Widget random post untuk menampilkan postingan acak bukan sesuatu yang baru. Ada yang disertai thumbnail berupa screenshot gambar dengan ukuran kecil. Dan ada pula widget random post sederhana hanya berupa tulisan yang baru saja kita bahas.

Meskipun demikian, widget random post bukanlah sesuatu yang harus diabaikan begitu saja. Apalagi bagi pemula yang belajar membuat theme blogger sendiri dari nol. Dan saya termasuk didalamnya yang disebutkan kedalam golongan pemula tersebut.

Mengapa demikian? Mengapa widget ini tidak sepantasnya diabaikan? Karena widget ini menyajikan artikel tanpa batasan waktu, kategori maupun kepopulerannya. Sehingga, dengan kemunculannya diharapkan ada artikel tersebut yang menarik minat baca para pengunjung.

Masalahnya tinggal bagaimana menkustomisasi script random post yang banyak beredar ini. Tentunya sesuai dengan theme blogger yang sedang dibuat dengan sentuhan seni masing-masing web developer.  Ini kalau profesi blogger seperti kita boleh disebut sebagai web developer. Syukur-syukur script tersebut sudah cocok dengan theme yang sedang digarap.

Oleh karenanya, kali ini saya ingin menambah literatur yang bisa digunakan untuk mempercantik theme blogger. Salah satunya adalah script random post yang disertai thumbnail berikut ini. Tertarik untuk mencobanya? Simak bahasan artikel kali ini tentang widget random post plus thumbnail.

Cara Membuat Postingan Acak Disertai Thumbnail

Untuk membuat postingan acak yang disertai thumbnail sangatlah mudah. Script ini juga tersebar bebas di internet. Dan script ini belum saya modifikasi agar berjalan sesuai dengan keinginan. Misalnya ditempatkan pada bagian bawah tiap postingan artikel atau berada di tengah halaman.

Mudah-mudahan suatu hari ada kesempatan untuk mencoba variasi tersebut. Selanjutnya kita langsung saja membuat widget random post beserta thumbnail sebagaimana dijelaskan selengkapnya berikut ini.

1. Login ke dashboard Blogger.

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

3. Klik "Tambahkan Gadget" pada bagian sidebar.

4.  Pilih HTML/JavaScript.

5.  Beri judul dan copy kode di bawah ini lalu letakan pada bagian konten.

<style> #random-posts img { border-radius: 10px; float: left; margin-right: 5px; width: 75px; height: 75px; background-color: #F5F5F5; 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; padding: 0px auto 5px; } #random-posts a:hover { text-decoration: none; } .random-summary { font-size: 11px; background: none; padding: 5px; margin-right: 8px; } #random-posts li { margin-bottom: 10px; border-bottom: 1px solid #EEEEEE; padding: 4px; } </style> <ul id='random-posts'> <script type='text/javaScript'> var randomposts_number = 5; var randomposts_chars = 0; 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) + "…"; }; 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/AVvXsEgdMrP0SELAaimkxa9Ww8zEF56JJ4oxoBeM8NnNn3l_Dv083PFUFdA4X6blvb77levGG7zvaPOzADpi10cbVCtFJ6aAR4qbRaWX9hB16s87vYSR_FN7dx_4z6QkWuSgxBFTSNYhNy1ojmE/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>

6. Klik Simpan.

Demo

 

Kesimpulan

Widget random post yang disertai thumbnail yang beredar kebanyakan berkisar melalui add gadget. Ketika saya lihat didalamnya sepertinya terdiri atas kode CSS dan JavaScript. Melihat hal demikian ada keinginan untuk memecah dengan cara seperti kode lainnya. Maksudnya, bagaimana jika kode CSS di atas diambil kemudian dikumpulkan bersama kode CSS lain? Lalu kode JavaScriptnya saya pindah ke dalam theme tepatnya sebelum tag penutup </body>. Apakah dengan cara ini akan berhasil?

Sependek yang saya coba kemarin sepertinya ada kode reset khusus yang tertera di sana. Karena setiap beberapa kali menerapkan ide di atas maka kode melalui add gadget via tata letak ini kembali seperti semula. Padahal sudah saya coba memodifikasinya sesuai dengan theme blogger saya yang dibangun dengan Halfmoon tersebut dari nol.

Mungkin ada yang bisa melakukannya lebih baik? Silahkan tinggalkan komentar.

Baca Juga