Blog yang berkualitas dan profesional juga dilihat dari tampilan widget-widget yang dipasang. Dan Salah satu widget yang banyak digunakan oleh banyak blogger adalah widget random pos baik itu Random Post yang biasa saja atau pun random post yang dilengkapi dengan thumbnail atau gambar.
Apa itu Random Post?
Random post atau yang sering disebut dengan artikel ''sembarang'' adalah widget yang menampilkan postingan atau artikel blog kita secara acak baik itu artikel yang baru dibuat atau pun artikel yang sudah sangat lama, Jadi artikel-artikel lawas anda dapat kembali dibaca oleh pengunjung blog.
Tentu saja ini sangat menguntungkan kita karena dengan random post ini pageviews pada tiap artikel blog saudara bisa meningkat dari sebelumnya-sebelumnya. Sehingga memberikan efek yang bisa dibilang cukup besar dalam meningkatkan kualitas blog Kita.
Cara Memasang Random Post Beserta Thumbnail
Sama halnya dengan Popular Post yang bisa dipasangi gambar atau Thumbnail, Random post yang akan saya bagikan kali ini juga sudah saya modifikasi dengan gambar sehingga akan mempercantik tampilannya. Jadi 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 tutorial sederhana di bawah ini:
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>
Note:
- Kode warna Hijau: Untuk Mengatur lebar dan tinggi gambar/thumbnail pada random post nanti.
- Kode warna Merah: Adalah Jumlah Postingan yang ingin ditampilkan.
- Kode warna Biru: Adalah Jumlah karakter/huruf pada ringkasan yang ingin ditampilkan.
Sekian tutorial saya kali ini, maaf jika saya ada kesalahan dalam pengetikan.
jika ada yang tidak dimengerti bisa di komentari di bawah ini.
1 comment:
Kalau yang tampil hanya thumbnail nya aja gimana min??
Post a Comment