Cara buat Random Post Bergambar + Deskripsi

Random Post, merupakan sarana untuk menampilkan Postingan di blog secara acak. Ya, secara acak, sehingga postingan-postingan yang sudah jadul alias luama banget sekalipun akan ikut muncul dalam post Random.
Apa gunanya ? tentu gak perlu lah saya jelaskan disini. Ntar namah melenceng dari tujuan kan.., hehee..
Oke deh. Langsung ke permasalahan.
Untuk membuat/memasang Random Post seperti pada screenshoot di bawah ini:

Tampak terdapat gambar Thumnal, Judul tulisan serta cuplikan tulisannya, yang istilah kerennya disebut Deskripsi. keren kan ?? 

Gimana cara buatnya?
Gini, kita login ke Blogger lalu masuk ke Edit Tata letak kemudian tambahkan widget baru.
Pilih tipe HTML dan .... tuliskan. Eh knapa harus susah banget, paste in aja lah biar cepat en pasti kagak salah kode 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:70px;height:70px;
}
.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 = 125;
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 += "/>"

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="http://adituek.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
<small><a href="http://adituek.blogspot.com/search/label/Widget%20Blog" target="_blank">Widget by adituek</a></small>
Ganti alamat URL nya (warna merah) dengan URL blog anda. Anda juga bisa merubah ukuran besar gambar thumnal nya, jumlah Postingan yang di tampilkan serta panjang deskripsinya.

Simpan widget lalu lihat hasilnya. Sebuah widget random Post yang keren sekarang telah menghiasi blog anda..

Kalo ada yang kurang jelas tanyain aja via koment form ato langsung ke email saya, 
Segini dulu ya, besok di sambung dengan yang laen lagi.

Salam............

Posting Komentar

0 Komentar