Cara Membuat Random Post dengan Thumbnail

Cara Membuat Random Post dengan Thumbnail - Random Post atau yang sering disebut Artikel "sembarang" adalah widget yang menampilkan postingan di blog kita secara acak, bila pada artikel sebelumnya kita telah membahas tentang recent post berdasarkan label, pada kesempatan kali ini saya akan membahas kebalikanya dari widget tersebut, karena widget ini bukan menampilkan recent atau postingan terbaru, melainkan menampilkan artikel secara acak berurutan vertikal kebawah dan tidak bergantung dengan tanggal terbit maupun labelnya.

Seperti judulnya, widget random post ini akan dilengkapi dengan fitur thumbnail dan number of comment, jadi setiap artikel yang ditampilkan akan memuat satu gambar teratas pada postingan dan juga menampilkan berapa jumlah komentar yang sudah dipublikasikan pada halaman artikel tersebut. Disini kita juga bisa mengatur berapa jumlah random post yang ingin kita tampilkan, bisa 5, 10, dan seterusnya, tergantung minat dan kebutuhan kita.

Menurut saya pribadi widget ini sangat berpotensial untuk merefrensikan berbagai artikel yang mungkin dicari oleh pengunjung, karena dalam widget ini tidak hanya menampilkan artikel-artikel terbaru atau terpopuler saja, melainkan widget ini akan menampilkan artikel-artikel yang sudah lampau maupun yang baru di publish, jadi pengunjung dapat dengan mudah menemukan artikel-artikel "lama" yang sudah jarang kelihatan di blog kita. Selain itu, cara ini juga sangat mudah untuk diterapkan, karena hanya membutuhkan add gadget yang berada pada halaman tata letak di dasbor blogger anda, jadi anda tidak perlu repot-repot meng-edit HTML blog.

1. Login ke Blogger.

2. Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini kedalam box konten.

<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 merah : Jumlah postingan yang ingin ditampilkan.
• Kode biru : Jumlah karakter/huruf ringkasan yang ingin ditampilkan.
• Kode hijau : lebar dan tinggi thumbnail/gambar yang ingin ditampilkan pada setiap post.

6. Klik save, dan selesai.

Bagaimana? mudah bukan membuat random post yang dilengkapi dengan thumbnail gambar di blog. Demikian tutorial blog tentang cara membuat random post dengan thumbnail atau gambar, semoga bermanfaat, dan selamat mencoba. Blogging Is My Life...