Cara Memasang Random Post Beserta Thumbnail
Sama halnya dengan Popular Post
yang bisa dipasangi gambar, Random post yang akan saya bagikan kali ini
juga sudah saya modifikasi dengan gambar sehingga akan mempercantik
tampilannya. Tidak hanya itu, pada random post saya kali ini juga ada
ringkasan postinganya yang dapat membuat pengunjung tertarik untuk
membacanya.
Buat anda yang tertarik memasang widget random post ini, silahkan ikuti langkah-langkah sederhana di bawah ini:
Cara mudah membuat Random Post
Cara mudah membuat Random Post
1. Login dengan akun blog saudara
2. Masuk ke menu TATA LETAK
3. Klik tambah gadget --> pilih HTML/Javascript
4. Masukan script di bawah ini:
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.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 = 120; //Jumlah karakter postingan yang ditampilkan
var numofpost=5; //Jumlah postingan yang ditampilkan
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 += "/>"
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>
Keterangan kode di atas:
- Kode warna Hijau: Mengatur lebar dan tinggi gambar/thumbnail pada random post nanti.
- Kode warna Merah: Jumlah Postingan yang ingin ditampilkan.
- Kode warna Biru: Jumlah karakter/huruf pada ringkasan yang ingin ditampilkan.
Demikianlah artikel mengenai Cara mudah membuat Random Post . Semoga bermanfaat.
