Cara Membuat Widget Random Post dengan Gambar (Tumbnail)

Daripada sobat penasaran lebih baik kita langsung saja ke langkah-langkah kerjanya, cekidot,, hehehe;
- Login ke blogger
- Pilih Tata Letak kemudian Tambah Gadget
- Pilih HTML/JavaScript
- 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>
- Sebelum kita Simpan, ada beberapa yang bisa kita ubah agar sesuai dengan tampilan blog kita, diantaranya:
width:65px; height:65px; --> 65 adalah ukuran thumbnail
lengthsummary = 180; --> 180 adalah jumlah karakter isi post
numofpost=5; --> 5 adalah jumlah post yang ditampilkan - Simpan jika sudah selesai.
Post a Comment for "Cara Membuat Widget Random Post dengan Gambar (Tumbnail)"
PENTING!!!
1. Berkomentarlah dengan topik yang relevan dan tidak melakukan SPAM
2. Mohon untuk tidak memasukkan link aktif
3. Untuk memasukan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DISINI</i>
4. Komentar anda akan dimoderasi terlebih dahulu sebelum dipublikasi.
NB: Sebelum memasukkan kode silahkan parse terlebih dahulu dengan menggunakan tool konversi kode.