Membuat Random Post Hanya Dengan Thumbnail

Random Post Hanya Dengan Thumbnail
Jika dilihat dari tampilan gambar yang di samping, ini akan sama dengan tampilan popular post yang saya bagikan kemarin yaitu modifikasi popular post hanya thumbnail, namun sebenarnya ini adalah random post yang saya modif sehingga tampilannya hanya thumbnail-nya saja.


Pada umumnya random post dengan thumbnail akan menampilkan thumbnail di sebelah kiri dengan judul post dan potongan deskripsi di sebelah kanan, ada juga yang menampilkan tanggal post dan jumlah komentarnya.

Terus terang saja random post ini terinspirasi dari blognya kang +Ruly Jenar Nakula yang keren itu hehehehe... dan ini sebenarnya untuk random post template game online yang tengah saya modif secara blog game online selalu menampilkan banyak gambar agar tampilan blognya menarik.

Untuk itu kemudian saya searching untuk script random post dengan thumbnail dan akhirnya menemukan yang lumayan simple dan mudah dimengerti. Kemudian saya modif sedikit agar hanya menampilkan thumbnailnya saja. Sebenarnya random post agak berbeda dengan popular post yaitu randam post bisa menampilkan postingan lebih dari 10 buah, namun pada gambar di atas saya sengaja hanya penampilkan 9 buah post agar tampilannya sama dengan popular post kemarin. 

Nah bagi yang ingin mencobanya juga silahkan ikuti langkah-langkahnya di bawah ini.

1. Langkah Pertama

Silahkan copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </style>

#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 !important;  padding: 0 !important;  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;}
#random-posts img{float:left;margin-right:5px;margin-bottom:5px;border:none;width:90px;height:90px;transition:all 400ms ease-in-out;}
#random-posts img:hover {opacity:.7}

2. Langkah Kedua

Silahkan masuk ke tata letak dan tambahkan gadget HTML/JavaScript kemudian masukan script di bawah ini.

<div id="random-posts">
<ul>
<script type='text/javaScript'>
var rdp_numposts=9;
var rdp_snippet_length=0;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>
</div>

Untuk mengatur banyaknya post yang ditampilkan silahkan atur pada kode var rdp_numposts=9; dan untuk mengatur size gambarnya silahkan atur pada angka 90 yang berwarna merah pada kode CSS sama kode javascriptnya. Dan setelah saya cek widget ini valid HTML5 dan CSS3 juga tidak mengurangi skor SEO pada Chkme dan image dimention di GTMetrix.

Selamat mencoba...

Sumber script: http://karaokebatak.blogspot.com/2013/02/cara-membuat-random-post-with-thumbnail.html

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments