Cara Membuat Random Post dengan Thumbnail

Published by Admin Minggu, 07 April 2013

Random Post adalah menampilkan post-post yang sudah kita post ke blog secara acak. Tidak hanya judul, tetapi kita juga bisa menampilkan random post dengan disertai summary yaitu ringkasan isi dan thumbnail atau cuplikan gambar. Tampilan random post jadi lebih menarik, seperti halnya popular post.

Dulu, Belajar Ngeblog di BLOG juga pernah membahas tentang membuat Random Post, tetapi yang tampil hanya judul. Nah, sekarang kita akan belajar membuat random post dengan juga menampilkan thumbnail untuk mempercantik tampilan dan ringkasan isi post agar pembaca tertarik melihat.

Dengan memasang Random Post, tulisan-tulisan kita yang terdahulu bisa menjadi tampil dan bisa kembali dibaca pengunjung blog. Ada pilihan menu baru yang sebenarnya itu sudah lama, kita suguhkan kembali melalui Random Post. Pengunjung akan banyak pilihan dan berlama-lama di blog kita.

Cara Membuat Random Post dengan Thumbnail
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 120% !important;
}
.rp-summary {
margin-top: 3px !important;
font-size: 100% !important;
line-height: 1.3em !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:65px;height:65px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 180;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>

5. Sebelum kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
width:65px;height:65px; -->  65 adalah ukuran thumbnail
lengthsummary = 180; --> 180 adalah jumlah karakter isi post
numofpost=5; --> 5 adalah jumlah post yang ditampilkan
6. Simpan jika sudah selesai.