Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Membuat Widget Random Post Tanpa Gambar di Bawah Postingan Valid HTML5 dan CSS3 – Tutorial kali ini saya berbagi sebuah widget lagi yaitu random post di bawah postingan. Sebetulnya widget ini bisa saja diletakkan pada sidebar blog, namun untuk menarik minat pembaca agar tampilan navigasinya lebih ideal saya letakkan random post ini di bawah postingan.

Random post ialah widget yang menampilkan link postingan blog yang dipilih secara acak, tanpa terbatas pada label tertentu. Mana artikel yang beruntung, maka link dari artikel tersebut yang akan ditampilkan dan terlihat artikel tidak monoton pada satu konten yang sama label. Widget ini sangat cocok dipasang pada blog yang memiliki beragam konten di dalamnya, atau yang lebih sering disebut blog gado-bado.

Penggunaan widget random post adalah salah satu cara untuk membuat pengunjung mau membaca konten postingan yang ada pada blog tersebut. Dengan demikian pageviews blog akan meningkat setiap harinya. Oleh sebab itu, widget random post ini sering disebut salah satu widget yang sangat seo friendly.

Baca juga: Cara Meningkatkan Pengunjung dari Mesin Pencari

Ada beberapa jenis widget random post yang berserakan di mesin pencari Google, 2 random post jenis yang sering kali digunakan oleh blogger adalah random post yang memiliki thumbnail dan yang tidak memiliki thumbnail atau tidak menampilkan gambar. Pada tutorial kali ini saya akan membagikan script random post yang tanpa menggunakan gambar atau thumbnail. Alasannya, karena script ini lebih ringan, sebab tidak memuat gambar di dalamnya, sehingga sangat cocok diletakkan di bawah postingan.

Baca juga: Membuat Widget Artikel Terbaru Tanpa Gambar Valid HTML5

Bagi yang tertarik memasang widget random post di bawah postingan blog, simak tutorialnya berikut ini.

Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Kopi kode di bawah ini dan letakkan di bawah kode <data:post.body/>

<div class='random-url'>
    <h4>Random Post:</h4>
<ul id='random-posts'/>
<script>
//<![CDATA[
var homePage = "http://www.bungfrangki.com/",
numPosts = 5;
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+='<div class="random-posts"><li><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li></div>'}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></div>

Ganti www.bungfrangki.com dengan nama blog anda.
Angka pada kode numPosts = 5; adalah jumlah link yang akan di tampilkan pada widget ini nanti, sesuaikan dengan kebutuhan blog anda.

Untuk mengatur tampilan widget random post tersebut, anda bisa mengedit css berikut ini.

/* Random Post */
.random-url{margin:10px 20px 25px;padding:0}
.random-url h4{color:#333;text-transform:capitalize;font-family:&#39;Roboto&#39;, Arial, Sans-Serif;font-size:140%;font-weight:400;position:relative;padding:0 10px 10px;margin:0}
.random-posts a{color:#4285f4}
.random-posts a:hover{text-decoration:underline !important}

Demikian tutorial kali ini, semoga membantu.