Cara Membuat Widget Random Post Simpel Keren dengan Nomor (Tanpa Gambar)

Setelah membahas tentang cara membuat widget Recent Posts tampilan simpel tapi keren dengan disertai nomor, kali ini saya juga ingin berbagi untuk versi widget Random Post-nya. Widget random posts atau artikel acak termasuk salah satu fitur kelengkapan blog yang cukup andal dalam menarik pembaca untuk betah berlama-lama nongkrong di blog kita. Oleh karenanya, widget ini akan sangat cocok jika dipasang di blog anda. 

Dulu saya juga pernah membagikan tutorial membuat widget random post versi lengkap dengan gambar, keterangan tanggal dan jumlah komentar (baca: Cara Membuat Widget Random Post (Artikel Acak) Pada Blog). Nah kali ini saya ingin berbagi versi sederhananya yaitu hanya berisi judul-judul postingan acak dengan disertai nomor agar tetap keren. Jika anda sudah membaca tutorial saya sebelumnya tentang cara membuat widget Recent Post bernomor, tampilan widget random post ini saya buat serupa dan seirama sehingga cocok jika disandingkan dengan widget recent post tersebut. 

Fungsi widget random post ini yaitu untuk menampilkan daftar postingan secara acak sehingga dapat lebih mengeksplor keseluruhan artikel di blog anda, mulai dari artikel lama sampai artikel terbaru, mulai dari artikel yang jarang dikunjungi sampai artikel yang populer atau ramai kunjungan. Anda nanti bisa coba dengan mereload halamannya, hasilnya juga akan berbeda-beda. Selain itu, tampilan widget yang saya bagikan ini juga dibuat sederhana sehingga tidak begitu mempengaruhi kecepatan loading blog anda. Tampilan screenshotnya kurang lebih seperti di bawah ini:

Tertarik untuk membuatnya?, silahkan simak dan ikuti langkah-langkah pemasangannya di bawah ini. 

1. Buka akun blogger anda.

2. Pilih menu layout (tataletak).

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

4. Setelah terbuka, isi kolom judul dengan nama Random Post, Artikel Acak, Artikel Lainnya, atau semacamnya. 

5. Pada kotak html, masukkan kode berikut ini ke dalamnya. 

<style>

ul#random-posts{list-style:none;background:#f8f8f8;margin:0 auto;padding:0;}

li.random-posts{counter-increment:num;display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;padding:7px 8px 7px 34px!important;margin:0;transition:all .3s;position:relative;line-height:1.4em}

li.random-posts:before{content:counter(num);display:block;position:absolute;font-size:17px!important;top:7px;left:9px;font-weight:700;font-style:italic;color:#f66!important}

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

li.random-posts a:hover{color:#c00}

</style>

<ul id="random-posts"></ul>

<script>

//<![CDATA[

var homePage = "https://santossalam.blogspot.com/",

numPosts = 10;

function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="random-posts"><a href="'+link+'" title="'+title+'">'+title+'</a></li>'}ct.innerHTML=content}}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}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post);

//]]>

</script>

Keterangan: 

• Ganti Url di atas (warna merah) dengan Url blog anda. 
• 10 adalah jumlah judul artikel yang ditampilkan, anda bisa ganti sesukanya. 

6. Jika sudah, silahkan simpan dan lihat hasilnya.

Demikianlah Cara Membuat Widget Random Post (Artikel Acak) Simpel Keren dengan Nomor. Semoga bermanfaat.

Lokasi:

Berbagi :