Cara Menciptakan Random Post Dengan Thumbnail

Avatar , RSS FEED    Comment   

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

Dulu, Belajar Ngeblog di BLOG juga pernah membahas wacana membuat Random Post, tetapi yang tampil hanya judul. Nah, kini kita akan berguru menciptakan random post dengan juga menampilkan thumbnail untuk mempercantik tampilan dan ringkasan isi post semoga pembaca tertarik melihat.

Dengan memasang Random Post, tulisan-tulisan kita yang terdahulu dapat menjadi tampil dan dapat kembali dibaca pengunjung blog. Ada pilihan sajian gres yang bersama-sama 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 dapat kita ubah semoga sesuai dengan tampilan blog kita, diantaranya:
width:65px;height:65px; -->  65 ialah ukuran thumbnail
lengthsummary = 180; --> 180 ialah jumlah huruf isi post
numofpost=5; --> 5 ialah jumlah post yang ditampilkan
6. Simpan kalau sudah selesai.
Sumber https://www.kurniasepta.com/