Cara Mudah Membuat Random Post Di Blog

Posted by ss

Thursday, September 26, 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. Simpan jika sudah selesai.

NB :
[-] Text yg berwarna MERAH adalah Ukuran Thumbnail (Gambar)
[-] Text yg berwarna OREN adalah Jumlah Karakter Isi Post
[-] Text yg berwarna BIRU adalah Jumlah Post Yg Akan Ditampilkan


Yaaa,, Saya hanya bisa itu, kurang lebih saya Minta Maaf

Semoga Bermanfaat

Share This :